Instagram Graph APIにSpring Bootアプリケーションからリクエストする
概要
大まかに下記の手順を踏むことで Instagram Graph API にリクエストする。 1. Spring Security OAuth2 Clientを利用してFacobookにログイン 2. ログインした状況で、Instagram Graph API にリクエストを行うAccess Token を取得する 3. Access Token を利用して Instagram Graph API にリクエストする
公式document
- https://spring.pleiades.io/spring-security/site/docs/5.3.13.RELEASE/reference/html5/#oauth2login
- https://developers.facebook.com/docs/facebook-login/web/?translation
- https://developers.facebook.com/docs/instagram-api/getting-started
主な使用技術とversion
- OpenJDKI 17.0.2
- Spring Boot 2.7.1
- Spring Security 5.7.2
- Spring Security OAuth2 Client 5.7.2
前提知識
https://www.youtube.com/watch?v=PKPj_MmLq5E
上記の OAuth & OIDC 入門編 by #authlete という Authleteさんの動画が、OAuth2.0とOpenID Connectを理解する上で、とてつもなく分かりやすい。
なので見て理解しておくと、Spring SecurityのOAuth2 Loginの機能が何を裏でしているのかが分かって良いと思う。
前提
下記の状態である事を前提とする。
1. FacebookページとInstagramビジネスアカウントを紐づける
Facebookページとは、個人の情報が記載されるFacebookのアカウントとは別に、ビジネスなどの目的でFacebook上に作られるアカウントを指すもよう。
1-1. 自身のInstagramビジネスアカウントの プロフィールを編集 ボタンを押下して編集画面に遷移する
1-2. 編集画面のページの行の リンクまたは作成 を押下して Facebookページにリンク モーダルを表示させる。
1-3. Facebookページをリンクする
- InstagramビジネスアカウントとリンクさせたいFacebookページが無ければ
Facebookページを作成を押下してFacebookページを作成する。作成が完了するとリンクが完了する。 - 既にInstagramビジネスアカウントとリンクさせたいFacebookページがあれば
既存ページをリンクを押下する。押下するとリンクが完了する。
2. Meta for Developers
2-1. 自身のFacebookアカウントとしてFacebookにログインする
https://developers.facebook.com/products/facebook-login/?locale=ja_JP
上記のページの右上のログインからFacebookにログインする。
2-2. マイアプリページに遷移する
上記でログイン後、ヘッダーに マイアプリ というリンク先が表示されるので、押下して遷移する。
2-3. アプリを作成 ボタンを押下してアプリタイプ選択画面に遷移する
2-4. 適切なアプリタイプを選択して、次へを押下して基本情報入力画面に遷移する。
2-5. 基本情報を入力して、アプリ作成 ボタンを押下してMeta for Developers のダッシュボードに遷移する
アプリ作成 ボタンを押下するとFacebookアカウントのパスワードを求められるので入力すると、ダッシュボードに遷移する。
これによりMeta for Developersにアプリを作成出来る。
3. 開発モード
3-1. テストアプリを作成 ボタンを押下する
テストアプリを作成 ボタンを押下すると、テストアプリを作成 モーダルが表示される。
3-2. テストアプリ名を入力して、テストアプリを作成 ボタンを押下する
テストアプリを作成 ボタンを押下すると、パスワードをもう一度入力してください というモーダルが表示されるのでFacebookアカウントのパスワードを入力して送信を押下する。
これによりMeta for Developersに上記のテストアプリの作成が出来る。
このテストアプリでは、アプリは開発モードとなり、localhostによるAPIの開発が出来るようになる。
4. Spring Boot アプリケーションの構築
4-1. IntelliJ IDEAからNew Projectを作成する
IntelliJ IDEAのSpring Initializer からNew Projectを作成する。
上記のように依存性を含めて create ボタンを押下すると、下記のような依存性を定義されたbuild.gradleファイルが含まれたプロジェクトが作られる。
https://github.com/sakuoden/instagram-graph-api-sample/blob/main/build.gradle#L15-L26
4-2. Security Configの設定を定義する
Spring Security の OAuth2 ログイン機能（Spring Boot Starter OAuth2 Client に依存している）を使うことで、OAuth2で定義されている認可コードフローを、自身で実装せずに達成してくれる。
ログイン機能を使う設定は下記URLの通り。
https://github.com/sakuoden/instagram-graph-api-sample/blob/main/src/main/java/sample/infrastructure/config/SecurityConfig.java
上記の設定により - ログイン方法をOAuth2ログイン機能にしている。 - /login（ログインページ）と/css/**, /favicon.ico（リソース関連）以外へのリクエストは、全て認証されなければならない設定にしてある。
4-3. application.propertiesに必要な値を定義する
Spring Security の OAuth2 ログイン機能（Spring Boot Starter OAuth2 Client に依存している）に必要な値を定義する。
その設定は下記の通り
https://github.com/sakuoden/instagram-graph-api-sample/blob/main/src/main/resources/application.properties
各キーと値について説明
| キー | 説明 |
|---|---|
| spring.security.oauth2.client.registration.facebook.client-id | 上記2で作成したテストアプリの アプリID を記述する。上記例のapplication.propertiesでは実際の値を環境変数に定義している。Meta for DevelopersのFacebookアプリダッシュボードの 設定 -> ベーシック に記載されている。 |
| spring.security.oauth2.client.registration.facebook.client-secret | 上記2で作成したテストアプリを app secret を記述する。上記例のapplication.propertiesでは実際の値を環境変数に定義している。Meta for DevelopersのFacebookアプリダッシュボードの 設定 -> ベーシック に記載されている。 |
| spring.security.oauth2.client.registration.facebook.scope | AccessTokenが許可する範囲を記述する。記述する内容は、スタートガイドの 2. Facebookログインを実装する に記載されている。 |
| spring.security.oauth2.client.provider.facebook.authorization-uri | OAuth2.0の認可エンドポイントを記述する。これを記述しないとSpring Bootが設定しているデフォルトの認可エンドポイントにリクエストを行い、結果としてversion2.8くらいのエンドポイントにリクエストされる。この値は執筆時点での最新versionである。 |
| spring.security.oauth2.client.provider.facebook.token-uri | OAuth2.0のトークンエンドポイントを記述する。これを記述しないとSpring Bootが設定しているデフォルトの認可エンドポイントにリクエストを行い、結果としてversion2.8くらいのエンドポイントにリクエストされる。この値は執筆時点での最新versionである |
| spring.security.oauth2.client.provider.facebook.user-info-uri | OpenID ConnectのUserInfo Endpointにリクエストされるuriを記述する。これは定義しなくてもデフォルトの設定で良さそうだが、念の為記述している。 |
4-4. ログインしたUserのアクセストークンを取得するコンポーネントを作成する
4-5. Instagram Graph APIにリクエストするクライアントを作成する
4-6. 投稿一覧を取得するサービスを作成する
4-7. Facebookログインをする画面とControllerを作成する
Controller
https://github.com/sakuoden/instagram-graph-api-sample/blob/main/src/main/java/sample/presentation/LoginController.java
OAuth2AuthorizationRequestRedirectFilterに定義されているDEFAULT_AUTHORIZATION_REQUEST_BASE_URIを利用する。
このURIにリクエストをすると、Spring SecurityがFacebookの認可エンドポイントにリクエストを送る。
HTML
4-8. Instagramの投稿一覧を表示する画面とControllerを作成する
Controller
https://github.com/sakuoden/instagram-graph-api-sample/blob/main/src/main/java/sample/presentation/HomeController.java
上記4-6で作成したInstagramServiceを利用して投稿一覧オブジェクトを取得する。
