JavaScript SDK
JavaScript SDKとは
Implicitフローで利用する場合
- 属性情報の取得とフォームへの自動入力が簡単に行えます。
- リダイレクトできません。redirectUriには自ページのURLを設定してください。
Authorization Codeフローで利用する場合
- 認可コードを取得し、Access TokenやID Tokenを発行できます。
- 属性取得API(UserInfoAPI)にアクセスして属性情報を取得できます。
- 任意のURLにリダイレクトできます。
- responseType,state,nonceの指定が必須です。
サンプル
ボタンを押すと別ウィンドウが起動してログイン画面、同意画面が表示されます。
- フロー
ログインが完了すると、下記のフォームにそれぞれの属性情報が自動入力されます。
実装方法
ログインボタン生成
- ボタンの種類
-
ボタン
テキストリンク
- ボタンのテキスト
- サイズ
-
- プレビュー
- ログイン
-
Client IDを登録するで登録したClient IDを指定してください
-
アプリケーションの管理から設定したコールバックURLを指定してください
- scope
-
メールアドレスや氏名など属性情報の取得に必要なパラメーターです。
属性取得API(UserInfoAPI)を参考に、必要に応じて指定してください
- フロー
以下に生成されたスクリプトをHTML内に設置してください。
上記の項目を選択・入力すると、ここに実装用のコードが表示されます。
属性一覧
| パラメーター | 概要 | 入力値(サンプル) |
|---|---|---|
| name | 姓名 | 矢風太郎 |
| givenName | 名 | 太郎 |
| givenNameKana | カナ名 | タロウ |
| givenNameKanji | 漢字名 | 太郎 |
| familyName | 姓 | 矢風 |
| familyNameKana | カナ姓 | ヤフウ |
| familyNameKanji | 漢字姓 | 矢風 |
| gender | 性別 male / femaleのどちらかを返却 | male |
| zoneInfo | Asia/Tokyo固定 | Asia/Tokyo |
| locale | ja-JP固定 | ja-JP |
| birthDate | 生年(月日は含まない) | 1986 |
| nickname | 名前 | やふうたろう |
| picture | アイコン画像URL | https://dummy.img.yahoo.co.jp/example.png |
| メールアドレス | yconnect@example.com | |
| emailVerified | メールアドレス確認済みステータス | true |
| country | 国コード | JP |
| postalCode | 郵便番号 | 1028282 |
| region | 都道府県 | 東京都 |
| locality | 市区町村 | 千代田区 |
| address | 都道府県+市区町村 | 東京都千代田区 |
Yahoo! ID連携 v2
- Yahoo! ID連携とは
- ガイドラインを確認する
- Yahoo! JAPAN IDを取得する
- Client IDを登録する
- 各種フロー
- ネイティブアプリを開発
- 属性取得API(UserInfoAPI)
- ID Token
- JavaScript SDK
- PHP SDK
- Java SDK
- デザインガイドライン
- APIアクセス実装方法
- Yahoo! ID連携用語集
- FAQ