Các màn hình đăng nhập chính là mảnh giao diện signin đi kèm, hiển thị theo từng trạng thái của nó. Hai màn hình cuối là ví dụ để sao chép.
Mỗi ví dụ đều hoạt động thật, nhưng các liên kết trong đó không dẫn đến đâu.
signin signin-title live-head
Hãy nêu bật một lối vào chính, các lối khác đặt bên dưới. Đừng tách đăng ký khỏi đăng nhập: một nút dùng được cho cả hai thì ít phải giải thích và ít sai hơn.
Một ô nhập và một nút. Không có gì phải nhớ và không có gì để đánh cắp. rastrillo làm sẵn việc này.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Trình duyệt nhớ lần trước đã vào bằng cách nào. Một lần chạm gửi địa chỉ đã nhớ, và địa chỉ đó được kiểm tra lại từ đầu.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Địa chỉ nằm ngay trên nút, nên không phải gõ gì cả.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Cách vào nhanh nhất với người đã có, và không phải gõ gì cả. Hãy cung cấp thêm một cách thứ hai: người ta làm mất thiết bị, và một passkey không dùng được là một cánh cửa khoá.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Hiển thị lại đúng địa chỉ vừa nhập. Đó là cơ hội duy nhất để phát hiện lỗi gõ trước khi ngồi chờ một email không bao giờ tới.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Khi địa chỉ không phải do trình duyệt này gửi, trang không đoán nó.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Một dòng cho biết lần này đã gửi liên kết. Nó không đoán lý do.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Trang tự chuyển tiếp, kèm một liên kết phòng khi nó không tự chuyển.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Thông báo thuộc về ô nhập, và tiêu điểm bắt đầu ở đó.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Nút đổi sang gửi liên kết thay thế, để không ai bị kẹt.
{{ define "title" }} {{ template "signin-title" (dict "State" .Signin "Brand" .Brand )}} {{ end }}
{{ define "content" }} {{ template "signin" (dict "State" .Signin "Brand" .Brand )}} {{ end }} Chúng tôi cung cấp các nút, vẽ đúng theo yêu cầu của từng công ty. Chúng tôi không cung cấp phần đăng nhập: bạn tự nối nó tới nhà cung cấp mình dùng.
<section rst-box >
<h1 >Đăng nhập</h1 >
<div rst-signin-providers >
<form method ="post" action ="/auth/google" >
<button rst-btn ="block" type ="submit" >
<svg aria-hidden ="true" focusable ="false" width ="1.1em" height ="1.1em" viewBox ="0 0 48 48" ><path fill ="#EA4335" d ="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" /><path fill ="#4285F4" d ="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" /><path fill ="#FBBC05" d ="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" /><path fill ="#34A853" d ="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" /></svg >
Tiếp tục với Google
</button >
</form >
<form method ="post" action ="/auth/apple" >
<button rst-btn ="block" type ="submit" >
<svg aria-hidden ="true" focusable ="false" width ="1.1em" height ="1.1em" viewBox ="0 0 24 24" ><path fill ="currentColor" d ="M12.15 6.9c-.95 0-2.42-1.08-3.96-1.04-2.04.03-3.91 1.18-4.96 3.01-2.12 3.68-.55 9.1 1.52 12.09 1.01 1.45 2.2 3.09 3.79 3.04 1.52-.07 2.09-.99 3.94-.99 1.83 0 2.35.99 3.96.95 1.64-.03 2.68-1.48 3.68-2.95 1.15-1.69 1.63-3.33 1.66-3.42-.04-.01-3.18-1.22-3.22-4.86-.03-3.04 2.48-4.49 2.6-4.56-1.43-2.09-3.63-2.32-4.39-2.38-2-.15-3.68 1.09-4.62 1.09zm3.38-3.07c.84-1.01 1.4-2.43 1.25-3.83-1.21.05-2.66.8-3.53 1.82-.78.9-1.46 2.34-1.27 3.71 1.34.1 2.71-.69 3.55-1.7z" /></svg >
Tiếp tục với Apple
</button >
</form >
<a href ="/signin" >Dùng email của bạn thay thế</a >
</div >
</section >Nếu bạn vẫn dùng mật khẩu, hãy giữ nguyên bố cục một lối vào chính, và đặt cách đặt lại mật khẩu ngay dưới nút, đừng giấu đi.
rastrillo không mang theo màn hình này. Người ta dùng lại mật khẩu, mật khẩu bị lộ, và việc lưu giữ chúng an toàn rơi vào tay bạn. Hãy dùng liên kết gửi qua email kèm passkey, hoặc chỉ passkey. Mã đánh dấu có ở đây vì một số sản phẩm vẫn cần nó.
<section rst-box >
<h1 >Đăng nhập</h1 >
<form rst-form method ="post" action ="/signin" >
<div rst-field >
<label rst-field-label for ="pw-email" >Email</label >
<input rst-input id ="pw-email" name ="email" type ="email" autocomplete ="email" required >
</div >
<div rst-field >
<label rst-field-label for ="pw-pass" >Mật khẩu</label >
<input rst-input id ="pw-pass" name ="password" type ="password" autocomplete ="current-password" required >
</div >
<button rst-btn ="primary" type ="submit" >Tiếp tục</button >
</form >
</section >