Yahoo! ID連携

JavaScript SDK

JavaScript SDKとは

Implicitフローで利用する場合

  • 属性情報の取得とフォームへのAutofillが簡単に行えます。

Authorization Codeフローで利用する場合

  • 認可コードを取得し、Access TokenやID Tokenを発行できます。

  • UserInfoAPIにアクセスして属性情報を取得できます。

実装方法

Implicitフローの場合

  • Implicitフローの場合はリダイレクトできません。redirectUriには自ページのURLを設定してください。
<span class="yconnectLogin"></span>
<script type="text/javascript">
window.yconnectInit = function() {
    YAHOO.JP.yconnect.Authorization.init({
        button: {              // ボタンに関しては下記URLを参考に設定してください。
                               // https://developer.yahoo.co.jp/yconnect/loginbuttons.html
            format: "image",
            type: "a",
            textType:"a",
            width: 196,
            height: 38,
            className: "yconnectLogin"
        },
        authorization: {
            clientId: "",    // 発行されたClient IDを入力してください
            redirectUri: "", // 本スクリプトを埋め込むページのURLを入力してください。
            scope: "openid",
            windowWidth: "500",
            windowHeight: "400",
        },
        autofill: {          // AutofillはImplicitフロー限定の機能です。
            name: "name",
            givenName: "given_name",
            givenNameKana: "given_name#ja-Kana-JP",
            givenNameKanji: "given_name#ja-Hani-JP",
            familyName: "family_name",
            familyNameKana: "family_name#ja-Kana-JP",
            familyNameKanji: "family_name#ja-Hani-JP",
            gender: "gender",
            zoneInfo: "zoneinfo",
            locale: "locale",
            birthDate: "birthdate",
            nickname: "nickname",
            picture: "picture",
            email: "email",
            emailVerified: "email_verified",
            address: "formatted",
            locality: "locality",
            region: "region",
            postalCode: "postal_code",
            country: "country"
        },
        onSuccess: function(res) {
            // 正常時のコールバック関数
            // res変数に各属性情報が格納されます。autofillを用いらず独自にプリセットする場合には
            // res変数をご利用ください。
            document.getElementById("postalCode").value = res.postalCode;
            document.getElementById("address").value = res.address;
        },
        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/2.0.1/auth-min.js");
fs.parentNode.insertBefore(s, fs);
})();
</script>

属性一覧

パラメーター 概要 入力値(サンプル)
name姓名矢風太郎
given_name太郎
given_name#ja-Kana-JPカナ名タロウ
given_name#ja-Hani-JP漢字名太郎
family_name矢風
family_name#ja-Kana-JPカナ姓ヤフウ
family_name#ja-Hani-JP漢字姓矢風
gender性別
male / femaleのどちらかを返却
male
zoneinfoAsia/Tokyo固定Asia/Tokyo
localeja-JP固定ja-JP
birthdate生年(月日は含まない)1986
nickname名前やふうたろう
pictureアイコン画像URLhttps://dummy.img.yahoo.co.jp/example.png
emailメールアドレスyconnect@example.com
email_verifiedメールアドレス確認済みステータスtrue
country国コードJP
postal_code郵便番号1028282
region都道府県東京都
locality市区町村千代田区
formatted都道府県+市区町村東京都千代田区

Authorization Codeフローの場合

  • Authorization Codeフローでは任意のURLにリダイレクトできます。
  • Authorization Codeフローの場合はresponseType,state,nonceの指定が必須です。
<span class="yconnectLogin"></span>
<script type="text/javascript">
window.yconnectInit = function() {
    YAHOO.JP.yconnect.Authorization.init({
        button: {              // ボタンに関しては下記URLを参考に設定してください。
                               // https://developer.yahoo.co.jp/yconnect/loginbuttons.html
            format: "image",
            type: "a",
            textType:"a",
            width: 196,
            height: 38,
            className: "yconnectLogin"
        },
        authorization: {
            clientId: "",
            redirectUri: "",
            scope: "openid",
            windowWidth: "500",
            windowHeight: "400",
            // Authorization Codeフローの場合は下記パラメーターは必須です。
            responseType: "code",
            state: "<サーバーサイドで生成したCSRF対策用のランダム文字列>",
            nonce: "<サーバーサイドで生成したリプレイアタック対策用のランダム文字列>"
        },
        onSuccess: function(res) {
            // 正常時のコールバック関数
            // res変数に各属性情報は格納されていませんのでご注意ください。
        },
        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/2.0.1/auth-min.js");
fs.parentNode.insertBefore(s, fs);
})();
</script>


Yahoo!知恵袋で調べる