web-sign-in: Difference between revisions

Latest revision as of 00:00, 4 June 2025

Use the (Web sign-in) button on a site to sign-in with your personal web address.

When you click a (Web sign-in) button, the site will ask you for your web address, e.g.:

Web address: [........................] (Sign-in)

or:

Web address:
[........................]
(Sign-in)

Enter your personal web address and press return / click (Sign-in).

set up

Your personal site must be set up for web sign-in.

Link from your personal site to your other profiles. Add rel="me" to those hyperlinks. E.g.:
<a rel="me" href="https://github.com/your_github_alias">...
Edit your other profiles, e.g. your GitHub profile, and set link (🔗) text field to your personal web address. E.g.
🔗 https://yoursite.example.com/
When you use your personal site with web sign-in the first time*, your browser will redirect you to to your online profile, e.g. GitHub, and ask you to:
- Sign-in with your account on that profile (e.g. sign in to GitHub) if you're not already signed-in.
- Authorize the site to use your account, e.g. your GitHub account:
  Authorize Site to use your account?

* Subsequent sign-ins to the same web sign-in form should be pre-filled with your domain name (e.g. via a cookie from the site) so all you have to do is click (Sign-in). In addition, if the site is properly using HTML5 <input type=url>, browsers will help you auto-complete your personal web address for you across all sites that do web sign-in.

developers

user interface

For the Web sign-in UI, see the text mockups at the top of this page as a design starting point.

Important details:

The web address input "[........................]" MUST accept
- a "plain domain" e.g. tantek.com and canonicalize that to https://tantek.com/
- an https domain without a path e.g. https://sixtwothree.org and canonicalize to https://sixtwothree.org/

protocol

See the RelMeAuth page for documentation on how to support Web sign-in protocol on your site.

example implementations

IndieLogin not only uses Web sign-in but also provides a web sign-in authentication API!
- IndieWeb: Try out IndieLogin by signing-in to IndieWeb.org.

why

See Why web sign-in on the IndieWebCamp site.

@@ Line 1: / Line 1: @@
-<entry-title>Web sign-in</entry-title>
+{{DISPLAYTITLE:Web sign-in}}
 Use the (Web sign-in) button on a site to sign-in with your personal web address.
@@ Line 23: / Line 23: @@
 Your personal site must be set up for web sign-in.
-# Link from your personal site to your other profiles. Add <code>rel="me"</code> to those hyperlinks. E.g.: <blockquote style="white-space:nowrap"><code>&lt;a <strong>rel="me"</strong> <nowiki>href="http://twitter.com/your_twitter_alias"&gt;...</nowiki></code></blockquote>
+# Link from your personal site to your other profiles. Add <code>rel="me"</code> to those hyperlinks. E.g.: <blockquote style="white-space:nowrap"><code>&lt;a <strong>rel="me"</strong> <nowiki>href="https://github.com/your_github_alias"&gt;...</nowiki></code></blockquote>
-# Edit your other profiles, e.g. your [https://twitter.com/settings/profile Twitter profile settings], and set the "Web" ("homepage", "Website/Blog") field to your personal site. E.g. <blockquote style="white-space:nowrap">Web <span style="border:1px solid silver; padding:5px; margin-left:1em"><nowiki>http://yoursite.example.com/</nowiki></span></blockquote>
+# Edit your other profiles, e.g. your [https://github.com/ GitHub] profile, and set link (🔗) text field to your personal web address. E.g. <blockquote style="white-space:nowrap">🔗 <span style="border:1px solid silver; padding:5px; margin-left:1em"><nowiki>https://yoursite.example.com/</nowiki></span></blockquote>
-# When you use your personal site with web sign-in the first time[[#subsequent|*]], your browser will redirect you to to your online profile, e.g. Twitter, and ask you to:
+# When you use your personal site with web sign-in the first time[[#subsequent|*]], your browser will redirect you to to your online profile, e.g. GitHub, and ask you to:
-#* Sign-in with your account on that profile (e.g. sign in to Twitter) if you're not already signed-in.
+#* Sign-in with your account on that profile (e.g. sign in to GitHub) if you're not already signed-in.
-#* Authorize the site to use your account, e.g. your Twitter account: <blockquote><p>Authorize Site to use your account?</p><p>This application will be able to:</p><ul><li>Read Tweets from your timeline.</li><li>See who you follow.</li></ul><p>( Sign In )</p></blockquote> Click the <b>( Sign In )</b> button and you should be all set.
+#* Authorize the site to use your account, e.g. your GitHub account: <blockquote><p>Authorize Site to use your account?<!-- Replace this with the GitHub OAuth text: </p><p>This application will be able to:</p><ul><li>Read Tweets from your timeline.</li><li>See who you follow.</li></ul><p>( Sign In )</p></blockquote> Click the <b>( Sign In )</b> button and you should be all set.-->
 <nowiki>*</nowiki> <span id="subsequent">Subsequent</span> sign-ins to the same web sign-in form should be pre-filled with your domain name (e.g. via a cookie from the site) so all you have to do is click (Sign-in). In addition, if the site is properly using HTML5 <code>&lt;input type=url&gt;</code>, browsers will help you auto-complete your personal web address for you across all sites that do web sign-in.
 == developers ==
-See the [[RelMeAuth]] page for documentation on how to support Web sign-in on your site.
+=== user interface ===
+For the Web sign-in UI, see the text mockups at the top of this page as a design starting point.
+Important details:
+* The web address input "[........................]" MUST accept
+** a "plain domain" e.g. tantek.com and canonicalize that to https://tantek.com/
+** an https domain without a path e.g. https://sixtwothree.org and canonicalize to https://sixtwothree.org/
+=== protocol ===
+See the [[RelMeAuth]] page for documentation on how to support Web sign-in protocol on your site.
 === example implementations ===
-* [http://tantek.com/relmeauth/ RelMeAuth prototype] demonstrates Web sign-in for both read-only/read-write permissions, and provides a simple interface for Tweeting when read-write permissions are provided.
+<!-- Needs updating to GitHub: * [http://tantek.com/relmeauth/ RelMeAuth prototype] demonstrates Web sign-in for both read-only/read-write permissions, and provides a simple interface for Tweeting when read-write permissions are provided. -->
-* [http://indieauth.com IndieAuth] not only uses Web sign-in but also provides a web sign-in authentication API!
+* [https://indielogin.com IndieLogin] not only uses Web sign-in but also provides a [https://indielogin.com/api web sign-in authentication API]!
-** IndieWebCamp: Try out IndieAuth by signing-in to [http://IndieWebCamp.com IndieWebCamp.com].
+** IndieWeb: Try out IndieLogin by signing-in to [https://indieweb.org IndieWeb.org].
 == why ==
 See [http://indiewebcamp.com/Why_web_sign-in Why web sign-in] on the IndieWebCamp site.