Yahoo! ID連携

SDKを利用しない場合

STEP2: Yahoo! JAPAN IDログインボタンを作成する

サンプル

ボタンを押すと別ウィンドウが起動してログイン画面、同意画面が表示されます。

はじめに設置するボタンのデザインを選択します。アプリケーションIDを登録する で登録したアプリケーションIDとコールバックURLを指定します。scopeはメールアドレスや氏名など属性情報の取得に必要なパラメーターです。以下を参考に必要に応じて指定してください。

ログインボタン生成

ボタンの種類
ボタン
テキストリンク
サイズ
プレビュー
ログイン
scope

以下に生成されたスクリプトをHTML内に設置してください。

nonceを生成してスクリプト内に埋め込む

ご利用の開発言語でユニークなランダム文字列を生成してstate(リクエストとコールバック間の検証用)とnonce(リプレイアタック対策)に指定してください。

ログインするリクエストごとに生成しセッションやデータベースなどに保存してください。stateはユーザーのセッションにひもづけて保存してください。

<script type="text/javascript">
window.yconnectInit = function() {
    YAHOO.JP.yconnect.Authorization.init({
        button: {
            format: "image",
            type: "a",
            width: 196,
            height: 38,
            className: "yconnectLogin"
        },
        authorization: {
            clientId: "YOUR_APPLICATION_ID",
            redirectUri: "https://example.com/callback.php",
            scope: "openid",
            state: "<リクエストとコールバック間の検証用のランダムな文字列>",
            nonce: "<リプレイアタック対策のランダムな文字列>"
        },
        onError: function(res) {
            // エラー発生時のコールバック関数
        },
        onCancel: function(res) {
            // 同意キャンセルされた時のコールバック関数
        }
    });
};
(function(){
var fs = document.getElementsByTagName("script")[0], s = document.createElement("script");
    s.setAttribute("src", "https://s.yimg.jp/images/login/yconnect/auth/1.0.0/auth-min.js");
fs.parentNode.insertBefore(s, fs);
})();
</script>

state, nonceの生成アルゴリズムについて

十分な長さ(目安として32Byte以上)のランダムな文字列にしてください。数学関数やハッシュ関数を用いて英数字の文字列を生成する方法などがあります。



STEP3: エンドポイント仕様&フローを確認して実装する

エンドポイントの詳細な仕様は以下をご覧ください。


フロー

1. ユーザー認可リクエスト

JavaScriptのログインボタンを利用している場合には実装は不要です。
  1. クライアントはユーザーの認可を得るため、ユーザーをAuthorizationエンドポイントへリダイレクトさせます。
  2. Authorizationエンドポイントはユーザーを認証して、クライアントがアクセスする権限を与えることについてユーザーに確認をとります。
  3. ユーザーによる認可が得られた場合、事前に登録された戻り先URLへユーザーをリダイレクトさせ、認可コードと指定されたstateをクライアントに渡します。
  4. クライアントは認可リクエスト時に送信したstateと渡されたstateが同一かどうか確認します。

2. アクセストークン要求

アクセストークン新規取得フロー

  1. クライアントは認可コードを使って、Tokenエンドポイントへリクエストを送信します。この際、事前に発行してあるシークレットでBasic認証を行います。
  2. Tokenエンドポイントはクライアントを認証し、アクセストークン(access_token)とリフレッシュトークン(refresh_token)を返却します。要求があった場合はid_tokenも一緒に返却します。id_tokenに関しましてはこちらをご覧ください。
  3. クライアントは取得したアクセストークンとリフレッシュトークンを後で利用するため安全に保存します。ID連携を行う場合はアクセストークンと一緒に取得したid_tokenからユーザー識別子を取得するか、UserInfoAPIからユーザー識別子を取得し、ユーザー識別子をキーにリフレッシュトークンを保存してください。クライアント独自のIDがある場合は必要に応じてユーザー識別子と独自のIDの関連付け処理を行ってください。

アクセストークン更新フロー

  1. アクセストークンの有効期限が切れた場合、クライアントは保存しておいたリフレッシュトークンを用いてTokenエンドポイントへリクエストを送信します。この際、事前に発行してあるシークレットでBasic認証を行います。
  2. Tokenエンドポイントはクライアントを認証し、新しいアクセストークン(access_token)を返却します。クライアントから渡されたリフレッシュトークンの有効期限が切れていた場合はエラーを返却します。
  3. クライアントは新しいアクセストークンを取得し、期限切れのアクセストークンと置き換えます。リフレッシュトークンの期限切れでエラーが返却された場合は、1のフローからやり直して、ユーザーの認可を取り直す必要があります。

3. ウェブAPIアクセス

  1. クライアントはアクセストークンを使ってウェブAPIのエントリーポイントへリクエストを送信します。
  2. ウェブAPIはアクセストークンが有効な場合、正常なレスポンスを返却します。アクセストークンが無効な場合はエラーレスポンスを返却します。
  3. クライアントは取得したレスポンスをもとに処理を継続します。

上記1~3のフローにおけるクライアントの実装についてはサンプルコードを参照してください。



Yahoo!知恵袋で調べる