はじめに

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

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

アプリの作成

アプリを作成をクリック

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

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

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

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

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

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

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

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

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

httpsである必要があり、開発環境のlocalhostだと保存できません。

nogrokなどを使用して開発環境でもhttpsのURLを用意する必要があります。

しかもhttpで保存しようとしてもバリデーションエラー出ないんで罠です。

ここで設定したリダイレクトURLも使用するので環境変数に必要です

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

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

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

追加します。

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

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

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

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

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

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