Facebookログイン用のFacebookアプリを作成する

# 概要
- 「Facebookアカウントでログイン」を実現するために必要な、Facebookアプリを作成します
- Meta Developer のサイトで作成します
- 会社の登記簿や、会社の電話番号の書かれた書類のアップロードが必要です


# Meta for Developers のアカウントを作成
- Facebookのアカウントが無い場合は、あらかじめ作成しておきます
- https://developers.facebook.com/ を開いて、「利用を開始する」をクリックし、開発者に登録します
    - Facebookアカウントと、SMSを受信できる電話番号(またはクレジットカード)が必要です


# Facebookアプリの作成
- https://developers.facebook.com/ を開いて、上部メニューの「ログイン」からログインします
- 上部メニューの「マイアプリ」をクリックします
- 「アプリを作成」をクリックします

![screenshot_119.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/8d7e259b-ea4e-a147-53bc-f6882073f840.png)

- ポップアップが出ますが、「アプリを作成」をクリックします

![screenshot_121.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/976ec36d-26c4-b6d0-1762-072bcc1c8011.png)

- 「ユースケースを追加」画面で、「Facebookログインでの承認およびユーザーデータのリクエスト」を選択して、「次へ」をクリックします

![screenshot_123.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/7cb41ff3-a19a-ae8e-380f-e19d3b7ccc73.png)

- 「ゲームを構築していますか？」は「いいえ」を選んで、「次へ」をクリックします
![screenshot_124.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/ecdcc567-b550-a682-1757-9e2738cf57be.png)

- アプリ名と連絡先メールアドレスを記入して、「アプリを作成」をクリックします
    - アプリ名は後から変更できます


![screenshot_125.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/e48cdd14-4d66-8b45-d7b5-35ec8ab45c9c.png)

- 「アプリが作成されました」のポップアップが出ればOKです
    - 「ダッシュボードにアクセス」をクリックします

![screenshot_127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/f90660e9-3889-b201-1c63-0461559b0184.png)

- アプリのダッシュボードが表示されます

![screenshot_128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/e2665371-3ce7-906a-550b-c315d2ebca87.png)

# Facebookアプリの設定変更(クイックスタートの場合)

- 上記のダッシュボードで、「1.アプリをカスタマイズする」－「Facebookログインのボタンの追加をカスタマイズ」をクリックします

- 「Facebookログインとユーザーデータのリクエストをカスタマイズ」画面で、「クイックスタートに移動」をクリックします

![screenshot_131.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/23453202-fabf-dc2b-3744-1643c2f44410.png)


- アプリのプラットフォームで「ウェブ」をクリックします

![screenshot_132.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/38fd383d-dec7-1253-09ef-c2682243cb81.png)

- ウェブサイトのURL、JavaScriptのコピー、ログインステータスの確認、Facebookログインボタンの追加、次のステップ、といった設定があります




# Facebookアプリの設定変更(カスタムの場合)

## 1.アプリをカスタマイズする

### Facebookログインのボタンの追加をカスタマイズ
- 上記のダッシュボードで、「1.アプリをカスタマイズする」－「Facebookログインのボタンの追加をカスタマイズ」をクリックします

- 「Facebookログインとユーザーデータのリクエストをカスタマイズ」画面で、「設定に移動」をクリックします

![screenshot_134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/2c061e8d-7459-e46f-3d5f-48e058fe63a4.png)
![screenshot_135.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/7b9851c8-d378-bd37-efba-6a1c82e7fabe.png)

- 「有効なOAuthリダイレクトURI」欄に、`www.example.com`といった、自分が作るサービスやテストサイトのURLと`/accounts/facebook/login/callback/`を連結したURIを入力し、「変更を保存」をクリックします
    - 複数のURIを登録できます
    - 参考記事：
https://medium.com/@nurettinabaci/django-allauth-facebook-login-dc7183bbc706


### ユースケースをチェックして追加する

- 上記のダッシュボードで、「1.アプリをカスタマイズする」－「ユースケースをチェックして追加する」をクリックします

- 「認証とアカウント作成」の「カスタマイズ」をクリックします

![screenshot_140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/5390b02b-99ec-0878-ba89-f9f56b04c6d7.png)


- 上述の「Facebookログインとユーザーデータのリクエストをカスタマイズ」画面が表示されますが、何もせずダッシュボードに戻ります

## 2.アプリレビューの準備と申請

- 「ユースケースをテスト」をクリックし、「ユースケースをテスト中」画面が表示されますが、何もせずダッシュボードに戻ります
    - 「テスト要件を確認して完了する」が緑色になります

![screenshot_141.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/531e16cc-956d-3ccd-47fc-c7c0cda069c2.png)

- 「ビジネス認証」をクリックし、本人確認画面で「認証を開始」をクリックします

![screenshot_142.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/81c9424a-01d3-6a24-da83-1541b436f817.png)


- 「Metaビジネスマネージャにリンク」というポップアップが表示されるので、「新しいアカウントを作成」をクリックします

![screenshot_143.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/76e2fca9-66ee-9df8-6c2c-264674208ea8.png)


- 「ビジネスマネージャアカウントを作成」ポップアップが表示されるので、「ビジネス名」「氏名」「ビジネス用メールアドレス」を入力して「アカウントを作成」をクリックします
    - ビジネス名は、ビジネスの公称で、特殊文字は不可
    - 氏名は、苗字と名前の間にスペースが必要
    - ビジネス用メールアドレスは、認証メールが受信できるもの

![screenshot_146.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/a05fe7a1-17ef-2269-219b-8159ee8be3af.png)


- 「作成されました」のポップアップが表示されるので「認証を開始」をクリックします


- セキュリティセンター画面が表示されるので、「認証可能な組織」の「認証を開始する」をクリックします

- 各種情報を入力・アップロードします

![screenshot_152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/2cc51cac-3959-faed-c201-1765ef7120b2.png)

- ビジネスの所在地：日本
- ビジネスの詳細を追加：団体名や住所や電話番号を記入
- 「次へ」
- 公的記録から候補が表示されるので、選択して「次へ」
- 本人確認の書類（パスポートや運転免許証など）をアップロード
    - 1500x1000以上のサイズである必要があります
    - 本人確認は48時間以内に完了するとのことです
- 会社定款または会社設立証明書をアップロードする必要があります
    - 電話番号が含まれた書類（納税証明書など）もアップロードする必要があります
        - 電話番号は１つしか登録できないので注意です


### アプリレビュー
- 認証に成功すると、アプリをレビューに出すことができます
- レビューに通らないと、公開できません

- 「アプリレビュー」をクリックします
- 「アプリレビューのリクエスト」の「編集」をクリックします


- 「データの取り扱いに関する質問に回答」をクリックします

![screenshot_168.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/8cb9c90e-ede1-f515-e456-1ba78e29e812.png)

- 質問事項が表示されるので、回答して「送信」をクリックします
    - 「データ処理事業者」には、自社も含める必要があります
![screenshot_169.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142577/368342df-fadf-7fa9-cb2e-598118e19c3d.png)


# アプリID、app secretの確認
- 左メニューの「アプリの設定」－「ベーシック」から、`アプリID` と `app secret` が表示できます
    - `app secret` の表示には、パスワードを入力する必要があります

- `アプリID` と `app secret` をプログラムに与えると、Facebookログインできるようになります

# 残りのコーディング
- [Django、django-allauthで、Facebookログインの設定をする(WEBブラウザ版)]() をご覧ください