ヤッホー!シワちゃんだよーん2021-02-18ヤッホー!シワちゃんだよーんこんにちは、バックエンドエンジニアのキダです。SIWA対応でハマった点などを紹介いたしますので、興味がある方は参考にしてください。Apple(SIWA)は2020年7月より対応必須となりました。元々は2020年4月からとなっていましたが、コロナウィルスの影響もあり延期されていました対応必須の詳細は以下になります。対応してない場合、Appleのアプリの審査が通らない(新しいバージョンのアプリをリリースできない)くらしのマーケットは店舗向けアプリと、ユーザー向けアプリが存在します。ユーザー向けアプリは『Yahooログイン』『LINEログイン』を対応しているので、SIWAの対応が必須になっていました。ユーザー向けアプリはAndroid、iOS共にWebViewで作成されていて、アプリネイティブの機能以外は全てWeb側で実装されています。その為それほど優先度は上がっていなかったのですが、iOSユーザー向けアプリにマージ済みでリリースできていない機能が溜まってきた為、2021年1月より対応を進めていました。SIWAの特殊なところさて、そろそろ本題に入ります。SIWAが他のソーシャルログイン機能と比較して異なる点を箇条書きにしてみます。ID利用可)メールアドレス、ユーザー名を連携するためにはコールバックエンドポイントをPOSTで実装する必要がある利用者はメールアドレスの匿名化オプションと、転送停止設定が可能1.はとても便利な機能なのですが、2,3は開発する際に考慮する必要があり、主にこの点でハマったので詳細を説明します。この点はdev.toの記事がとても参考になったので、合わせて確認いただけるとよいと思います。Appleのデータ、デザインに関するガイドラインは以下になるので、こちらもご一読する事をお勧めします。CodeのOAtuh2認証がされています。パラメータをクエリストリングに付与してリダイレクト元ページではcodeの内容を検証して、問題なければ認証完了として、ログインや会員登録が完了ここの3でのリダイレクト処理はGETでリクエストされます。SIWAではどうなっているでしょうか。SIWAでの1のボタンに設定するURLは以下のように設定可能です。}}それぞれパラメータは以下のようになります。自由に設定可能ユーザー情報を連携するためにはresponse_modeをform_postに指定する必要があり、GETで戻す前提の作りになっていたため、リダイレクト先でPOSTを受け取れるように修正する必要がありました。/connectのようなページは元々GET,POST存在していましたが、既存の仕組みではcsrfTokenのチェックでリダイレクト時にエラーが出てしまいました。対応策こちらの問題の対応として、Appleからリダイレクトする専用のエンドポイントを作って対応しました。以下のようなredirect_uriを設定して、動作します。stateのパラメータをクエリストリングに付与してリダイレクト/redirectページで、stateの値を用いてセッションに保持したcsrfTokenチェックをして、問題無ければ元ページにGETでリダイレクト元ページではcodeの内容を検証して、問題なければ認証完了として、ログインや会員登録が完了/redirectを挟む事で元のエンドポイントでの修正を抑えて実装することが可能でした。これにて一件落着に見えたのですが、もう一つPOSTに起因する問題がありました。Chromeではこの認証フロー中にapple側の認証前(1.の状態)、apple認証後(4.の状態)でセッションが変わってしまう問題が出る事に気付きました。具体的にどういうことかというと、セッション情報はcookieに保持していて、長期間同一のセッションとして管理されています。Chromeでは2020年ごろからデフォルトのcookieプロパティがLaxになっており、今回POSTでリダイレクトする際にこのセッション情報を管理するcookieが失われてしまうといった問題が出ました。こちらの問題は前段で上げたdev.toの記事に紹介されている、リダイレクト先のscopeで有効なsamesite="none"のcookieを短時間で設定する方法で回避ができました。ちなみにユーザー情報を連携しない場合はGETでリダイレクトすることが可能な為、上記のような対応で懸念点がある場合にはGETで実装することも可能です。他のサイトも参考に見てみましたが、GETで実装されているサイトが多い印象です。利用者はメールアドレスの匿名化オプションと、転送停止設定が可能もう一つ特徴的な機能がメールアドレスの匿名化になります。エンドユーザーとしては、メールアドレスの流出を防いだり、メールマガジンなどの配信停止を利用するサイトにアクセスする必要無く対応できる点で、とても良い機能に見えました。以下のような画面で非公開設定が可能で、匿名化されたメールアドレスは以下のような形式になります。<ランダムな文字列>@privaterelay.appleid.com運用する側では以下のような対応をする必要があります。配信停止から配信再開になった場合を考慮して定期的なbounceリストの削除2.について少し説明します。くらしのマーケットではメール送信にSendGridを利用しているのですが、以下の操作をした後にメールを送信し配信に失敗した場合bounceリストに入ってしまいます。AppleIDのサイトからメールの転送を無効化AppleIDのサイトからアカウント連携を削除まだ本番ではbounceは発生していないですが、QAテスト時には同じAppleアカウントの連携を削除して、くらしのマーケットのアカウントを削除して、また新しくアカウントを作成してテストなどをしていたので、メールが届かないなどの問題がありました。こちらはbounceリストから該当のメールアドレスを削除することで対応が可能でした。最後に色々とハマりどころがあったのですが、なんとか対応できました。Bluetooth通話を爆速で開発する方...こんにちは、モバイルアプリエンジニアのリュウです。こんにちは、みんなのマーケットでフロント...2020-09-16ログイン画面の「当たり前」を調査みんなのマーケットでUI/UXデザイナーをしているミソサクです。...2018-09-07最近ちまたでよく聞くWebAssemblyを触ってみたみんなのマーケットでwebエンジニアとして働いている高橋です。積極採用中!みんなのマーケットでは、プロダクトをつくる仲間を募集中です。日本全国、また、グローバルでのフルリモート社員や業務委託についても、各職種で募集中です。開発職向けの会社紹介資料も御覧ください。2引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。