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

概要

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

Meta for Developers のアカウントを作成

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

Facebookアプリの作成

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

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

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

• 「ゲームを構築していますか？」は「いいえ」を選んで、「次へ」をクリックします
  

• アプリ名と連絡先メールアドレスを記入して、「アプリを作成」をクリックします

  • アプリ名は後から変更できます

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

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

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

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

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

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

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

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

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

Facebookログインのボタンの追加をカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アプリレビュー

• 認証に成功すると、アプリをレビューに出すことができます

• レビューに通らないと、公開できません

• 「アプリレビュー」をクリックします

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

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

• 質問事項が表示されるので、回答して「送信」をクリックします
  • 「データ処理事業者」には、自社も含める必要があります
    

アプリID、app secretの確認

• 左メニューの「アプリの設定」－「ベーシック」から、アプリID と app secret が表示できます

  • app secret の表示には、パスワードを入力する必要があります

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

残りのコーディング

• Django、django-allauthで、Facebookログインの設定をする(WEBブラウザ版) をご覧ください