IDログインボタンを作成するサンプルボタンを押すと別ウィンドウが起動してログイン画面、同意画面が表示されます。はじめに設置するボタンのデザインを選択します。登録したアプリケーションIDとコールバックURLを指定します。scopeはメールアドレスや氏名など属性情報の取得に必要なパラメーターです。以下を参考に必要に応じて指定してください。※横75px以下の場合は縦36px以上、縦35px以下の場合は横76px以上が必要です。address以下に生成されたスクリプトをHTML内に設置してください。上記の項目を選択・入力すると、ここに実装用のコードが表示されます。nonceを生成してスクリプト内に埋め込むご利用の開発言語でユニークなランダム文字列を生成してstate(リクエストとコールバック間の検証用)とnonce(リプレイアタック対策)に指定してください。ログインするリクエストごとに生成しセッションやデータベースなどに保存してください。stateはユーザーのセッションにひもづけて保存してください。nonceの生成アルゴリズムについて十分な長さ(目安として32Byte以上)のランダムな文字列にしてください。数学関数やハッシュ関数を用いて英数字の文字列を生成する方法などがあります。エンドポイント仕様&フローを確認して実装するエンドポイントの詳細な仕様は以下をご覧ください。ユーザー認可リクエストJavaScriptのログインボタンを利用している場合には実装は不要です。クライアントはユーザーの認可を得るため、ユーザーをAuthorizationエンドポイントへリダイレクトさせます。Authorizationエンドポイントはユーザーを認証して、クライアントがアクセスする権限を与えることについてユーザーに確認をとります。ユーザーによる認可が得られた場合、事前に登録された戻り先URLへユーザーをリダイレクトさせ、認可コードと指定されたstateをクライアントに渡します。クライアントは認可リクエスト時に送信したstateと渡されたstateが同一かどうか確認します。アクセストークン要求アクセストークン新規取得フロークライアントは認可コードを使って、Tokenエンドポイントへリクエストを送信します。この際、事前に発行してあるシークレットでBasic認証を行います。Tokenエンドポイントはクライアントを認証し、アクセストークン(access_token)とリフレッシュトークン(refresh_token)を返却します。要求があった場合はid_tokenも一緒に返却します。id_tokenに関しましてはこちらをご覧ください。クライアントは取得したアクセストークンとリフレッシュトークンを後で利用するため安全に保存します。ID連携を行う場合はアクセストークンと一緒に取得したid_tokenからユーザー識別子を取得するか、UserInfoAPIからユーザー識別子を取得し、ユーザー識別子をキーにリフレッシュトークンを保存してください。クライアント独自のIDがある場合は必要に応じてユーザー識別子と独自のIDの関連付け処理を行ってください。アクセストークン更新フローアクセストークンの有効期限が切れた場合、クライアントは保存しておいたリフレッシュトークンを用いてTokenエンドポイントへリクエストを送信します。この際、事前に発行してあるシークレットでBasic認証を行います。Tokenエンドポイントはクライアントを認証し、新しいアクセストークン(access_token)を返却します。クライアントから渡されたリフレッシュトークンの有効期限が切れていた場合はエラーを返却します。クライアントは新しいアクセストークンを取得し、期限切れのアクセストークンと置き換えます。リフレッシュトークンの期限切れでエラーが返却された場合は、1のフローからやり直して、ユーザーの認可を取り直す必要があります。ウェブAPIアクセスクライアントはアクセストークンを使ってウェブAPIのエントリーポイントへリクエストを送信します。ウェブAPIはアクセストークンが有効な場合、正常なレスポンスを返却します。アクセストークンが無効な場合はエラーレスポンスを返却します。クライアントは取得したレスポンスをもとに処理を継続します。上記1~3のフローにおけるクライアントの実装についてはサンプルコードを参照してください。