2018年6月26日火曜日
ウズマスター戦記
ウズマスター戦記 https://www.uzumax.org/2018/06/amazonamazon.html

Amazonからアクセストークンを取得する(Authorization Code Grant)

「「○○でログイン」って言うと、大抵はFaceBookかTwitterでやっているのが相場ですが、Amazonアカウントでもそれは可能です。

最近流行のAlexaで音声アプリを作る過程でAmazonからアクセストークンを取得する必要があったのですが、これが英語しかドキュメントが無くて手間取らされたので記録を残しておきます。
Login with Amazon (LWA)からアクセストークンを取得するまでの手順です。

  • Amazon SDK for JavaScriptを使用しない。
  • ピュアにHTTPリクエストを叩いて取得する。
  • Authorization Code Grant で行う。(Implicit Grant でやりたい場合は公式ページを参考に別途どうぞ)

1.Developerアカウントの取得

まず開発者はDeveloperアカウントを持っておく必要があります。
アカウント自体はAmazonで買い物する時と繋がっていますが、専用画面からdeveloperとして登録をしなきゃいけないようですね。

さっさと取得してしまいましょう。


ちゃんと作れば以下の画面に辿り着けているはずです。
これがDeveloperコンソールです。



2.セキュリティプロファイルの作成

作成画面への遷移

以下の手順でセキュリティプロファイルの作成に行く。

  • Developerコンソール⇒ヘッダーメニュー⇒アプリ&サービス⇒Amazon でログイン

すると以下のような画面に辿り着く。「Login with Amazon」画面です。



Create a New Security Profile ボタンを押して、セキュリティプロファイル作成画面に進みます。

Security Profile Management

この画面に各種パラメータをセットしてSaveして下さい。


パラメータ


カラム名 説明
Security Profile Name セキュリティプロファイルの名前。後で変えられるし、適当で良い。
Security Profile Description セキュリティプロファイルの説明。後で変えられるし、適当で良い。
Consent Privacy Notice URL プライバシーポリシーの掲載URL。ちゃんとアプリを公開する場合は重要だが、技術調査をするだけなら適当にセットすれば良い。
Consent Logo Image ロゴ。空でOK。必要なら後でセット

無事に作成されると以下のようになります。


3.OAuth2 Credentialsの取得

表示されている「Show Client ID and Client Secret」のリンクを押すと、「Client ID」と「Client Secret」が表示される。
これを覚えておくこと。

当たり前だが、これらの値は極秘です!!

流出させたらマジ死ぬので注意。
(このブログに出ている値は記事が出る頃には無効化されていますのでご安心下さい。)



4.リダイレクトURLの設定

ここがちょっと難しいところですが、これから取得しようとしているのはAuthorization Code grant のアクセストークンです。

Authorization Code grantってのは双方向認証で、要するにAmazonで認証した後、自分のアプリに戻って来る必要があります。

だから本来は自分のWebアプリを起動状態にしておくことは必須なんですが、Webアプリが動いていなくてもゴリ押し可能なので、このまま先に進みます。

Manage列の歯車から、Web Settingsを選択する。
その先の画面で自分がリダイレクトを受け取る自分のWebアプリのURLをセットする。

入力する項目は「Allowed Origins」「Allowed Return URLs」の2つがあります。

項目名 説明
Allowed Origins Amazon SDK for JavaScript を使用してログインボタンを作る時は、どうやらこっちにドメインをセットするらしい。 しかし今回はAmazon SDK for JavaScriptを使わないのでスルー
Allowed Return URLs リダイレクト画面のURLをセット。ちゃんと作る場合はちゃんとした受け口を作る必要があるが、今回はごり押しで行くので適当に入れる。

結果、以下の状態になった。
これでコンソールからの設定は終わり。


5.Authorization Requestで認可コード取得のリクエスト

では、早速HTTPリクエストを実行していきましょう。

Authorization Code Grantでは、最初に認可コードを取得する手順が必要です。

認可コードの取得処理であるAuthorization Requestについて書かれた公式サイトは以下です。

送り先のエンドポイント

  • https://www.amazon.com/ap/oa

パラメータ

パラメータ 説明
client_id 必須項目。クライアントID。Developerコンソールで取得した値をセット
scope 必須項目。取得するアクセストークンの権限の範囲を指定するものだが、とりあえずprofileとしておく。
response_type 必須項目。レスポンスタイプ。「code」で固定。
redirect_uri 必須項目。リダイレクトURL。DeveloperコンソールでセットしたURL。違うURLを入れると不正アクセス扱いされて弾かれるので注意。
state 任意項目。状態。状態ってのはクロスサイトリクエストフォージェリを回避する為のパラメータで、リクエストを送ると、レスポンスでも同じ値が戻って来ます。
同じ値であるべきなので、もし違う値が戻ってきたら、何か不正アクセスされてませんか、とこっちが判断して遮断するためのパラメータです。
自分で責任を持って扱わなければならないが、今回はアクセストークンを取得するだけが目的なので、適当に入れておくだけで検証はしない。

構築クエリ

送り先のエンドポイントと構築クエリを組み合わせると以下のようなURLを構築する。
各自の言語で地道に文字列構築するべし。

https://www.amazon.com/ap/oa?client_id={}&scope=profile&response_type=code&state={state}&redirect_uri={redirect_uri}

僕の場合はこんな感じでした。

https://www.amazon.com/ap/oa?client_id=amzn1.application-oa2-client.3f792ed10747422597e3f7798a3b5b05&scope=profile&response_type=code&state=208257577ll0975l93l2l59l895857093449424&redirect_uri=https://www.uzumax.org/

このクエリでGETリクエストする。
コピペでブラウザのアドレスに叩き込んじまえ!!

そうすると以下のように無事にAmazoの認証画面に遷移します。

6.認可コードをレスポンスから取得

認証画面で「許可」を押下すると、リダイレクトURLに戻ってきます。

  • https://www.uzumax.org/?code=ANFXWaPLFvIvDsvUnczc&scope=profile&state=208257577ll0975l93l2l59l895857093449424

クエリパラメータの中に「code」が入っていますね。
これが欲しかった認可コードです。これでアクセストークン取得リクエストが叩けます。


7.Access Token Request

アクセストークン取得に取り掛かります。公式サイトのドキュメントはこちら。




送り先のエンドポイント

  • https://api.amazon.com/auth/o2/token

パラメータ

パラメータ 説明
grant_type 必須項目。権限タイプ。Authorization_codeで固定
code 必須項目。認可コード。ただいま取得したばかりの値を使用
redirect_uri 必須項目。リダイレクトURL。さっきと同じ値をセット
client_id 必須項目。クライアントID。さっきと同じ値をセット
client_secret 必須項目。秘密鍵。Developerコンソールで取得した値をセット

これをPOST送信で送り込みます。
GETじゃないのでブラウザのアドレス欄に文字列直打ちとは行きません。

各自、得意な言語で頑張ってクエリを叩いてください。


8.取得成功

正しくPOST送信すれば、以下のようにJSON形式でアクセストークンが取得できます。

{
   "access_token":"Atza|IwEBIIGJQ5FQpOOOW8B_M3ed2EJ2ZCRi5dBz2tVuCV1qe4fRb0WtWpqtPsYjD_175obeMpohYOFHHntnHffh_nc3Hlga5uP2Mf-gbTM3uVj7wOX5fau8d8sdtngz6mcSFya7UUlF8fZpzwB17-THVChSHD6B7ktPthrpsDnRbgE4XVyswGoYhX9aHfkcf5NmcbX3xAcuwSMQtffoZGUusK6Gidns3Y8Dd6vdoSfs1Fmg3ynD5K1EaJoftI2fM60F2Rv-GSzE_WQZVNsoqlM4YwGvFzL-kNsyLH92m8FImM7wQUPuR7skrAgI5C7aojz9429u_BxTK_jWU-bfJPuw7NG0oWgHC8bTE8cl1ClmfRy-2ZqHjXmslBFPFwzY-w5DNdpkkENYRI9o8As2_5s60m3VN7LdQFL26TB9zd05u_8h9Qn170Eh56_L5DkO_WzlHB-WYF9iky1g6B_7ney827e5uXj7Eufy50ac_Fh-w2YG7IgJNgLyhAI3FCs0TCPywF2i0AFeR7caOWIdXiCHuO_dsSoswqwpMpofn89hCMg8i4XWIQ",
   "refresh_token":"Atzr|IwEBICLPXA0yaelP67mAkuwywnf9ZVnn9293fMHJOsZX_I2hyLuEuRQDfe6oQt9nLv44PShh-0FTj6raZ-3ZHDJkqXe1XYaikFcYOjZVyxWrEiUToiFGV2bVpFXq833FhSfS_EmIMkdxZkTgnF5e7zwuRAgCVnwZvv2ZsohHUv5w334WotDJoPZWvL5aQXLHA9jGp05OHccTDIVRex8mY7WlVT834V7lKHXcW6lh_51DKpq8kdqCUt2H4uV0C1GYSb95_8xXIX_XXwWNneLR_abt0voDlJd9nPZOlr_TBewNSScghg3jbaWfRN4-dhE2osviulaYqA9DgbkETgxWSFSo5kvDlGAoHXzFWnYuI1nwZdhIb-fIGt9YZg3Elg-SO3oKJva7Wq9z4_bZ3h5fci7PYf2Ev72nUvnhMIXlLcegpytveWy1Mi1LwGRfp2ZrZ2UPcYc5hYFDw0QfkSHaYrLaiRtUXOSId1IbO7RIpCro60wD27fCB7agK661_StDjBWwvpE",
   "token_type":"bearer",
   "expires_in":3600
}

お疲れ様でした。

0 件のコメント:

コメントを投稿

お気軽にコメント下さい。