页面示例

登录页面就是随附的 signin 片段，按它的各种状态展示。最后两个是供你复制的示例。

每个示例都能真实操作，但其中的链接不会跳转到任何地方。

signin signin-title live-head

<section rst-box>
  <h1>登录</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>
        使用 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>
        使用 Apple 继续
      </button>
    </form>
    <a href="/signin">改用电子邮件</a>
  </div>
</section>

邮箱和密码

如果你确实要用密码，沿用同样的“一个主入口”布局，并把重设密码的入口直接放在按钮下面，而不是藏起来。

我们不建议使用密码

rastrillo 不提供这个页面。人们会重复使用密码，密码会泄露，而妥善保存它们的责任落到你头上。请改用邮件里的链接加通行密钥，或只用通行密钥。这里给出标记，是因为有些产品仍然需要它。

桌面手机 HTML

<section rst-box>
  <h1>登录</h1>
  <form rst-form method="post" action="/signin">
    <div rst-field>
      <label rst-field-label for="pw-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">密码</label>
      <input rst-input id="pw-pass" name="password" type="password" autocomplete="current-password" required>
    </div>
    <button rst-btn="primary" type="submit">继续</button>
  </form>
</section>

登录

询问地址

用 Keymail 再次登录

用邮件链接再次登录

通行密钥

链接寄出之后

链接寄出之后，在另一个浏览器里

提供的是 Keymail，寄出的却是链接

正在前往 Keymail

看起来不对的地址

Keymail 无法确认时

Google、Apple 等等

邮箱和密码