【PHP】ソーシャルログインに対応したお話(Apple ID編) ①

  • このエントリーをはてなブックマークに追加

こんにちは

早速ですが、会員サイトを作る上で割とめんどくさいのがログイン機能です。

メールアドレスを入れてもらってそのアドレスが有効かどうかの判定を行う、パスワード管理など割と面倒くさいのですが、そこら辺の過半数をソーシャルログイン(SNSログイン)にしてしまうことが可能です

最近ではGoogleアカウント、Apple ID、LINE ID、X(旧Twitter)アカウント、Facebookログインなどいろいろありますが、実装する以前の下準備が少しめんどくさいのでまとめました。

今回は「Apple ID」でのサインインを説明したいと思います。

何が必要?

「Apple IDでサインイン」を行うに当たって必要な情報が3点あります。
    • Apple Developerに登録されている
    • ドメインのネームサーバーを編集できる
    • サーバーがSSLに対応している
Apple DeveloperについてはApp IDおよびKeyを登録して証明書を作成します。
ドメインのネームサーバーについてですが、「Apple IDでサインイン」を行う際、ユーザーは自分のメールアドレスの公開/非公開を選ぶことができます。

非公開にすると、そのアプリ(ドメイン)に対応したメールアドレスを生成し、個人のアドレスに転送することになります。

その際、アプリに紐付くドメインに対してSPFレコードで実在するかどうかのチェックを行う必要があり、ネームサーバーの編集を行う必要があるからです。

※ 「メールを非公開」とは?

「メールを非公開」は、独自のランダムなメールアドレスを生成し、個人の受信トレイに自動転送してくれます。各アドレスは、作成者固有のアドレスです。これらのアドレスに送信されたメールを直接読んで返信でき、個人のメールアドレスのプライバシーはしっかりと守れます。

https://support.apple.com/ja-jp/105078

では実際に登録していきます。

Apple Developersにログインする

下記のURLからログインしましょう。
「まだ登録してないよ」という場合はすぐに登録しましょう!

https://developer.apple.com/jp/

App IDを発行する

ログイン後は「Certificates, Identifiers & Profiles」のIdentifiersにアクセスし、App IDを発行しましょう
すでにiOSアプリでApp IDを発行済みの場合はそのApp IDを使えるので不要です。
  1. 「App IDs」を選択して「Continue」を押下してください
  2. 「App」を選択して「Continue」を押下してください
  3. 「Register an App ID」が出るので、Descriptionに説明コメントを英語で入れましょう。
    Bundle IDは一意の名前なので、webだけでいいのであれば FQDNの逆「hoge.co.jp」なら「jp.co.hoge」などでよいかと思います。
    アプリでも使う場合はアプリ側のBundle IDに合わせましょう。
    Capabilitiesから「Sigin In with Apple」にチェックを入れて「Continue」押下します。
押下すると下記のような画面になり今後必要な手順をまとめてくれますので、確認後に「Register」を押下します。

Service IDを発行する

次に同じ画面で再びService IDを新規発行します。
  1. 「Services IDs」を選択し「Continue」を押下してください
  2. 「Register a Service ID」が出るので「Description」に説明コメントを英語で入れましょう
    「Identifer」も一意の名前なのでApp IDと同様に入れましょう。(同じ名前ははじかれると思います)
  3. 「continue」を押下すると登録内容の確認が出るので問題がなければ「Register」を押下します

Key(証明書)を発行する

App IDと Service IDを発行したらKey(証明書)を発行します。
  1. Certificates, Identifiers & Profiles」のKeysにアクセスし、「+」を押下します。
  2. 「Register a New Key」のKey Name にわかりやすい名前を入れます。
    ENABLEの「Sign in with Apple」にチェックを入れ、「Configure」を押下します。
    Primary App IDに先ほど登録したApp IDを選択し、「Save」を押します。
  3. 「Continue」を押下して内容確認後に「Register」を押下します。
  4. するとKeyが発行されますので、「Download」を押下し、保存してください。
    一度ダウンロードすると再ダウンロードできないので十分注意してください。
    また Key IDが表示されてますので、そちらも保管してください。(先ほど落としたkeyのファイル名についてますが念のため・・・
  5. すべて保管したら「Done」を押下すると登録されます。
 

ドメインおよびメールアドレスを承認してもらう

ユーザーがメールアドレスを非公開にした場合、ユーザーのメールアドレスではなく転送用のメールアドレスが公開されます。
ただそのアドレスはAppleが存在を確認しないと送受信ができないため、ドメインおよび実際に使用するメールアドレスを登録し、SPFレコードを使った承認が必要となります。
  1. Certificates, Identifiers & Profiles」のServicesにアクセスし「Sign in with Apple for Email Communication」の「Configure」を押下します。
  2. Email Sources」の「+」を押下します。
  3. 「Domain and Subdomain」には使用するドメイン(FQDN)を、「Email Address」には使用するメールアドレスを入力してください。
    (複数ある場合はカンマ区切りで入力してください)
  4. 入力後「Next」を押下し内容確認後に「Register」を押下してください。
  5. 登録数が表示されるので「Done」を押下してください。
登録ドメインがDNSのTXTレコードにSPFレコードとして登録されていると、STATUSが「SPF」となり、使用できるようになります。



「Verify」できない場合はDNSにSPFレコード登録されているかどうか確認し、できていない場合はSPFレコードの登録を行ってください。

具体的なSPFレコードの記載例ですが、これだけで1本のエントリーが可能となるので今回は割愛します。

(2023.03.15追記)Service IDにドメインとReturn URL登録を行う

これだけだと許可したドメインがService IDに紐付いてないので紐付ける必要があります。
  1. Certificates, Identifiers & Profiles」のIdentifiersにアクセスしService IDsの中から先ほど登録したService IDを選択します。
  2. ENABLEDにある「Sign In with Apple」にチェックを入れ「Configure」を押下します。
  3. 「Primary App ID」に登録したAPP IDを選択し、「Register Website URLs」で使用するドメインおよびReturn URLsを入力します。
    Return URLは「アップルでサインイン」を行った場合の戻り先で、ユーザー情報などはここで取得できます。
    後で変更できますのでこの時点では決め打ちでも大丈夫です。
  4. 入力後「Next」を押下し、登録を行います。
 

今回はここまで

以上、事前準備となります。

次回は実際にPHPでサインインの実装したいと思います。

ちなみに・・・iOSアプリでも上記の手続きが必要となりますが、iOSアプリの場合は他社のソーシャルログインを実装すると必ず「Apple でサインイン」を要求され、リジェクトされますのでご注意ください。

執筆者:松本[ エンジニア ]

関連記事

マークアップ

コーポレートサイトのアクセシビリティ、どこまで対応すべき?

コーポレートサイトにおける。 重要だと分かっていても、コーポレートサイトにどこまで反映すべきかは悩みどころではないですか? 今回は、現実的に取り組みやすい部分と、対応が難しい部分を整理してご紹介します。 一概にこれが正解、というわけではありませんが、悩んでいる方の参考になればと思います。 目次1 コーポレートサイトでの達成基準は?2 比較的対応しやすい部分2.1 画像に代替テキストを設定する2.2 見出し構造の整理(h1~h6の適切な使用)をする2.3 色や形だけに依存しない […]

Webサイト制作

はじめてのShraePoint 実践的活用事例3選【業務効率化・DX】

目次1 SharePointとは?1.1 高い機密性が特長2 SharePointの活用法2.1 1.社内マニュアルや手順書を整備する2.2 2.営業資料や契約書の保管と共有に活用する2.3 3.情報の回覧やアンケート、意見収集の場として活用3 SharePointで作成したポータルサイト4 まとめ5 8bit公式 YouTube Channelのご紹介 SharePointとは? SharePointはMicrosoftが提供する情報共有サービスです。WordやExcel、 […]

Webデザイン

【Premiere Pro】動画素材の音声を自動で文字起こしする方法

Premiere Proの機能を使って、動画素材の音声を自動で文字起こししてみましょう。起こしたテキストは、発話タイミングに合わせて字幕として表示することもできます。とても簡単にできるので、ぜひ試してみてください。 目次1 自動文字起こし機能の使い方1.1 1.テキストパネルから文字起こしを行う1.2 2.文字スタイルの変更2 8bit公式 YouTube Channelのご紹介 自動文字起こし機能の使い方 1.テキストパネルから文字起こしを行う 音声データを含んだ動画をタイ […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。