Business Login for InstagramのMeta設定手順とハマりポイント

はじめに

Instagram Business Login を開発環境で動かすためのMeta設定手順メモです。

実装についてはここでは書いてないです。

アプリの作成

https://developers.facebook.com/apps にアクセスします。

アプリを作成をクリック

アプリ名とメールアドレスを埋めて、次へ

fillterは他のでも出てくるので適当にして「Instagramでメッセージとコンテンツを管理」を選択して、次へ

会社と紐づいてたらなんか出てくるけどどっちでもいいです、選択して次へ

確認画面です。OK、「アプリを作成」クリック

Instagramログイン設定

作成に成功すると以下のページに遷移します。

ダッシュボード→ アプリのカスタマイズと要件 → 「Instagramでメッセージとコンテンツを管理ユースケースをカスタマイズ」をクリック

遷移したページのアプリID/Instagram app sercretは実装で使用するので環境変数におく必要があります

同じページの「4. Instgramビジネスログインを設定する」の設定するボタンをクリック

モーダルが開くので、ここでInstagram認証成功後のコールバックURLを設定します。

テストユーザー設定

次に、開発中にログイン試すアカウントを指定する必要があります。

この設定をしないとリダイレクト前に認証系のエラーで失敗します。
サイドバーのアプリの役割→役割→メンバーを追加ボタンから追加します。

Instagramテスターを選択して、ユーザーネームを入力、オートコンプリートになってるので該当のユーザーを選択します。

追加します。

Instagramユーザー承認

一覧に登録したユーザーが出てくるのでリンクになってる「アプリとウェブサイト」をクリックするとInstagramに飛びます。

Instagramの設定 →アプリとウェブサイトへのアクセス許可→アプリとウェブサイト

先ほど追加したテストユーザーを承認します。

これで準備完了です！！！

ハマりポイント & 必須設定まとめ

• localhostは使えない（https必須）

• ngrokなどでhttpsのURLを用意する必要あり

• テスター追加しないとログインできない

• Instagram側で承認しないと利用できない

必須環境変数

• APP_ID // MetaアプリのID

• APP_SECRET // Metaアプリのシークレット

• REDIRECT_URI // Instagram認証後のリダイレクトURL

おわりに

こう見ると難しくなさそうなんですけど結構迷子で時間かかりました。。

次は迷わないように備忘録として書いたので参考にしてください。
実プロダクトではリダイレクトURLが異なるため開発用&stg用&prod用は必要そうです。。。