OpenID Connect を試してみる (ブラウザでアクセス)

# はじめに
OpenID Connect のとっかかりとして動作する環境を用意したいと思って試してみた。
Yahoo!ID で簡単にできるので、まずはこれで試す


1. yahoo!ID の取得
2. アプリケーションの登録
3. OpenID Connectの実行



# 手順

## yahoo!ID の取得

https://www.yahoo.co.jp にアクセスして、以下のような「[ID新規取得]」というのがあるので、これで Yahoo!ID を登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/b351748e-bc4c-cc58-a658-0d6ab30d5648.png)


登録するにあたって携帯電話に SMS でコードが送られる仕組みになって認証するようになっているので、携帯電話がないと無理ぽ。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/9cbb2a42-21f0-306e-42ee-54fa8c6d5951.png">


## アプリケーションの登録

### アプリケーション一覧画面の表示
上で作った Yahoo!ID でログインした後、以下の URL にアクセスする。
https://e.developer.yahoo.co.jp/dashboard/

以下のような画面が表示される。
(ここでは、すでにアプリケーションを2つ登録している)


<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/bb5ad781-5af3-7c8f-1f39-85b33b52db25.png">


### 新しいアプリケーションの開発

この画面で「新しいアプリケーションを開発」をクリックする。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/b1e62417-5cd0-c560-622e-8464ab113313.png">

|分類|項目|値|備考|
|---|---|---|---|
|Web APIを利用する場所||Yahoo!ID連携 v2|「Yahoo!ID連携 v1」でもいいが、デフォルトが v2 になっているし、今更 v1 使うこともないので v2 を選択|
||アプリケーションの種類|サーバーサイド（Yahoo! ID連携 v2）||
|アプリケーションの基本情報|アプリケーション名|Hello, YConnect!|なんでもいいので適当な名前を入力|
||サイトURL|http://example.com/|なんでもいいので URL を入力|
|||アプリケーションの説明|なんでもいいので入力|
||利用するスコープ|-|マイオークション関係は使わないのでチェックを入れない|
|ガイドラインを確認する|-|同意する|


以下のように登録される。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/56b3a45b-c9a9-2a50-f076-4888e7f9c3e7.png">


# OpenID Connect の実行

Yahoo にログインしている場合はあらかじめログアウトしておく。
そして、ブラウザを開いて以下のURLを

```url
https://auth.login.yahoo.co.jp/yconnect/v2/authorization?
    response_type=code+id_token&
    client_id=＜Client ID＞&
    redirect_uri=https://developer.yahoo.co.jp/start/&state=xyz&
    scope=openid+profile&nonce=abc
```

ログイン画面が表示されるので Yahoo!ID のメールアドレスを入力して、「次へ」をクリック

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/a41d6206-0af3-4dff-e4ba-60e207cefe2f.png">


携帯の SMS にコードが送られてくるので入力して「次へ」をクリック


<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/5a0972ae-48c2-f371-1eb0-7e997a31204e.png">



Yahoo!ID でログインしている場合は、ログイン画面が表示されず、そのままリダイレクト URL に遷移する。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/a31a424e-5990-0ad1-1a0c-59f02d0a6fce.png">


# コールバックURLを追加

以下のように、設定画面のコールバック URL に「https://www.google.com」を追加する。

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/7385d29d-dda7-05fb-4b2e-18a1069d8d08.png">


そして、ブラウザで「redirect_uri=https://www.google.com」と設定してブラウザでアクセスるとGoogleに飛ぶ。

```url
https://auth.login.yahoo.co.jp/yconnect/v2/authorization?
    response_type=code+id_token&
    client_id=＜Client ID＞&
    redirect_uri=https://www.google.com&state=xyz&
    scope=openid+profile&nonce=abc
```


# エラー

## クライアントIDが間違っているときのエラー

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/7b286391-dec0-19a9-7ef0-4642e3cd3619.png">


##「redirect_url」に設定した URL が「コールバックURL」に存在しないときのエラー

<img width="400" alt="" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304109/c358aa1c-a064-879f-9b8f-6958cba55167.png">


#参考
https://qiita.com/sonedasaurus/items/753a65186f1be7185b39
https://qiita.com/taxin/items/8f1f68cc5ea4fd488ba6
https://qiita.com/foxtrackjp/items/8531252b9a1cc2044d07