There are two main widgets provided by Identity Toolkit. The first is a "Sign In" button to begin the authentication flow, and the second is a widget for actually performing the sign in operation
Page with sign in button
On whichever page you wish to show the "Sign In" button or immediately begin the
authentication flow, you will need to include a bit of html in the
The only HTML element is a
<div id=”navbar”></div> which becomes
a “Sign In” button that you can customize with CSS.
If you choose to show this
<div id=”navbar”></div> after the
user has signed in, it will become a user info box.
The code to put in the
<head> can be downloaded from Developer
gitkit-signin-button.html. Then you can copy and paste this into
your page and end up with something like this:
Page with sign in widget
The sign in widget is the core of the Identity Toolkit implementation. The page handles the multiple functions of displaying your sign in page, invisibly handling responses from identity providers, as well as displaying drop-in account management widgets you may want to use on your site (for forgot password, manage account, etc.) You will want to keep these multi-use scenarios in mind when designing your page.
If you use the Identity Toolkit sign-in button described above, all you need
to do is configure the button's
widgetUrl to point to your widget
page. Otherwise, if you do not use the provided button, you must
add the query parameter
mode=select to begin the sign-in process, or
mode=manageAccount to invoke the account management page. Note that the
account management page will only function if the
gtoken cookie is present—if
your site uses its own session cookie, you might need to ask the user to
re-authenticate before they can view the management page.
Additionally, append the query parameter
signInSuccessUrl when loading
the widget page for sign-in to configure where the user will be redirected to
after sign-in completes. This query parameter can be useful when you would like
to return the user to their current page after signing in.
Here again, you can download the
<head> code from Developer Console, but will
need to add the
<div id="gitkitWidgetDiv"></div> yourself. (Note that if you
want to support Yahoo login, you will need additional logic to appropriately
is described in the per-language quick-start guides.)
You should then end up with something like this:
Email first vs provider first modes
The Identity Toolkit sign in widget supports two different flows: Email First and Provider First.
Email first mode
In this flow, which is enabled by default, the widget will first ask the user for their email address, and it will intelligently decide whether to try to sign that user in, or prompt that user to create a new account.
If Account Chooser is enabled (
accountChooserEnabled: true,), the
user may be prompted at the beginning of the flow with a credential picker so
they can quickly input an email address they previously used, with one tap.
Else, or if the user had no credentials stored in accountchooser.com, the user
will have to type their email address in full.
This flow is enabled by default, but you can also manually enable it by
including the following entry in your sign in widget config:
Provider first mode
In this flow, the user will always be prompted first with a screen outlining the different sign in options supported, like the screen below:
This mode is similar to our native flows in Android and iOS, and we recommend it for websites targeted at mobile devices, because it can save the user some typing.
In this mode, if Account Chooser is enabled
accountChooserEnabled: true,), the user may be prompted with a
credential picker after they click on “Sign in with email”, so they can quickly
input an email address they previously used, with one tap.
In order to enable this flow, include the following entry in your sign in widget
Customizing the UI
The user interface of the Identity Toolkit widgets is designed to be simple and look good on most sites, but customization is easy. The main pieces that you may want to customize include:
- CSS: It is possible to significantly modify the look of the different widgets by editing the css of the widgets
- Sign in page:
The sign in page widget is designed to be compatible for desktop and mobile
web and can be embedded in your own page with custom header, footer, etc.
If you wish to launch the sign in page without using our button, then please
?mode=selectto the widget URL.
- Account Chooser:
The Account Chooser is a separate web site that is owned and operated by the
Open ID Foundation. Identity Toolkit manages the interface between your app
and Account Chooser but you should also specify the branding and text that
you want displayed on the Account Chooser UI.
To customize the look of Account Chooser, set the optional
- title: the string that should be displayed as the title.
- favicon: full path to the favicon that should be displayed.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div style="width:256px;margin:auto"> <img src="/r/images/logo_160px.png" style="display:block;height:160px;width:160px;margin:auto"> <p style="font-size:14px;opacity:.54;margin-top:20px;text-align:center"> Welcome to our Demo. </p> </div> </body> </html>
Widgets should work well on mobile devices by default as long as the viewport header is included. This can be customized by you, but an example is:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Wherever a URL is needed, both absolute and relative are okay.