Twitter/Medium におけるGoogle One Tap SignIn/SignUp の使い方
ritouです。
タイトルが長いですね。
まとめ
- 既にGoogleにログイン中のユーザーと簡単にID連携するための、Google One Tap SignIn/SignUpなる機能がある
- 自分がよく見かけるのは Twitter/Medium
- Mediumはメアドをキーにしてるみたい
- TwitterはIDの紐付け + それがなかったらメアドみたいな感じに見える
- メアドをキーにしたID連携にはリスクがあるので覚えておきましょう
Google One Tap sign-in and sign-up
詳細は公式ドキュメントを読んでもらえるといいと思いますが、簡単に言うと外部サービス上で
- Googleにログイン中のユーザーでSignIn/SignUpするか？みたいなのを出せる
- 複数のログインユーザーがいる場合はリストを表示して「誰を使う？」みたいなのを出す
みたいなのができます。
例えばPCのChromeでプロファイル分けてて未ログインのTwitter開いたときはログイン中のユーザーで使いますか？みたいなのが出たり
一回ログインするとボタンに名前が載ったりなんだりします。
AndroidのTwitterアプリとかだとアカウントリストの表示が見れたりします。
Googleのアカウント選択を外部のサービス上でできる感じですね。
選択するとOIDCのIDTokenが取得できるみたいな感じです。
で、この機能自体は2018年ぐらいに発表があって、その時調べたものがありますがきっとこの時からはいろいろ変わっているでしょう。
## 何の話か
この機能で登録やログインのUXが改善されるのかな〜とか、 この機能ってクロスドメインなので3rd Party Cookie使ってるよな とか(設定で3rd Party Cookieブロックすると出なくなります)、 これを3rd Party Cookie使わずに実現させる仕組みがまさに例のやつだよな みたいな話をまとめたかったのですがそれはちょっと置いておいて、今回はこれの Twitter や Medium での使われ方に注目します。
今回、これらのサービスの挙動を見ていくにあたってGoogleのアカウントが2つある前提で話をします。
- アカウントA : メールアドレスA
- アカウントB : メールアドレスB
一般的に、サービスがソーシャルログインなりを実装するときはIdP(今回の話ではGoogle)のアカウントとの紐付けを管理します。OneTap対象アカウントをアカウントAにして、そこで、ID連携の状態とメアドの状態によってA~Fまで6パターンの挙動を確認していきます。
| パターン | 連携状態 | メアド |
|---|---|---|
| A | なし | OneTap対象アカウントと一致する(メアドA) |
| B | なし | OneTap対象アカウントと一致しない(メアドB) |
| C | OneTap対象アカウントと一致する(アカウントA) | OneTap対象アカウントと一致する(メアドA) |
| D | OneTap対象アカウントと一致する(アカウントA) | OneTap対象アカウントと一致しない(メアドB) |
| E | OneTap対象アカウントと一致しない(アカウントB) | OneTap対象アカウントと一致する(メアドA) |
| F | OneTap対象アカウントと一致しない(アカウントB) | OneTap対象アカウントと一致しない(メアドB) |
一般的なソーシャルログインの場合、どのような実装が考えられるでしょうか。
- A : ID連携はされていない状態だがメアドは一致するユーザーがいるので、メアドが一致する既存ユーザーのクレデンシャルを確認した上で連携 or 新規登録へ
- B : ID連携はされていない状態であり、メアドが一致する既存ユーザーも存在しないので新規登録へ
- C : ID連携の情報を利用してログインさせる
- D : ID連携の情報を利用してログインさせる
- E : メアドは一致するユーザーがいるが別のGoogleアカウントとID連携しているのでこのユーザーでは登録させずに新規登録へ
- F : ID連携はされていない状態であり、メアドが一致する既存ユーザーも存在しないので新規登録へ
ぐらいかなと思います。
Eあたりはサービスアカウント1:Googleアカウントnみたいな設計にすると変わるんでしょうけど大抵は1:1ですよね。
最初に Medium を見てみましょう。
Medium での使われ方
そういえば、私も英語の記事を書こうと思ってMediumでアカウント持っています。
よろしくです。
A: ログインして OneTap対象アカウントと紐付け
ID連携はされてないけど メアドをキーにしてログイン させちゃって、さらに対象のアカウントと連携までしちゃいます。
B: 新規登録もしくは既存アカウントを持っていたらログインしてね
すぐに新規登録にいくのではなく、OneTapなプロンプトの上でこの選択ができるのは少し便利かもしれません。
C: ログインする
ID連携の状態を使って普通にログイン。
してると思ってましたこの時までは。
D: 新規登録もしくは既存アカウントを持っていたらログインしてね
あれ、ログインできなかった。
もしやこれ、やっぱりメアドキーにしているのかな？
Cもメアドで引いてたのかも疑惑が出てきますね。
E: ログインして OneTap対象アカウントと紐付け
確信しましたね。MediumはGoogleアカウントとの連携ではメアドをキーにしてログインさせているということでしょう。
そしてID連携済みのGoogleアカウントも更新される模様。
F: 新規登録もしくは既存アカウントを持っていたらログインしてね
Bと一緒ですね。それはそう。
まとめ
- メアドをキーにして既存ユーザーを参照している
- Googleアカウントとの連携がない場合や別のユーザーと紐づいている場合でも、OneTapを使ったアカウントで更新する
Twitter での使われ方
(このOneTapに気づいたきっかけが、Chromeのプロファイルを分けて使ってる時に会社のアカウントの方でついついTwitterを開こうとした 時だなんて書くのはやめときます)
A: ログインして OneTap対象アカウントと紐付け
Mediumと同様に、ID連携はされてないけど メアドをキーにしてログイン させちゃって、さらに対象のアカウントと連携までしちゃいます。
B: 新規登録
Mediumとは異なり、いきなり新規登録フローに入ります。
C: ログインする
ID連携の状態を使って普通にログイン。
してると思ってましたよ。この時まではね。
D: ログインする
そうだTwitterよ。ID連携をちゃんとみてるじゃないか！
E: ログインして OneTap対象アカウントと紐付け
なんとこっちでもログインできました。
ID連携がなかったら、メアドをキーにしてログインさせているようです。
そして この状態から元のID連携済みのGoogleアカウントでOneTapしようとすると今度は新規登録にいきます。
きっと読んでくださってる方は何を言ってるかわからないでしょう。このEの状態でログインした瞬間に、ID連携の対象がOneTapを使ったアカウントに更新されていたということですね。
F: 新規登録
Bと一緒ですね。それはそう。
まとめ
- ID連携を参照している
- ID連携されていないがメアドが一致した場合、メアドをキーにして参照してログインさせ、その際にID連携のアカウントを更新する
- それ以外は新規登録に流す
これはやや複雑に見えますね。
まとめ
今回はGoogle OneTap SignIn/SignUpを使ってるサービスのログイン処理に注目しました。
その中で、MediumもTwitterもどこかしらでメアドをキーにして連携してるじゃねーかということに気づきました。
ID連携においてメアドをキーにした既存ユーザーとの連携は、メアドが普遍の値ではないことからアンチパターンとも言われていますが、その辺りを真面目にやろうと思うとステップが増えてしまう、みたいなジレンマもあるところです。
こういう大きなところの実装は真似されやすいので、大きな問題にならないことを祈っております。
元々書きたかったFedCMの話はまた今度な！
(おまけ: 人生、いろんなことがあります)
Mediumでメアド変えまくってたらリミット達したらしい
Twitterで連携済みのGoogleアカウントを解除できない
ではまた！
Discussion