NCMBのソーシャルログインを複数サービスに関連付ける #JavaScript

2022年終わりくらいからTwitter界隈が不穏になっています。特にAPIの有料化が発表されたり、クライアントアプリが開発できなくなったりと、開発者向けの施策で締め付けが増えています。

そんな中、認証でTwitterログインを利用しているアプリは多いでしょう。もしTwitter認証に何かあれば、ログインする手段が失われてしまいます。

そこで、現状のTwitter認証に他のソーシャルログインも関連付けておくことで、万一の際の代替手段になり得ます。今回はニフクラ mobile backend（NCMB）のソーシャルログインで、複数のサービス認証を関連付ける方法を解説します。

本記事ではJavaScript SDKを利用しています。

最初のソーシャルログイン

まず最初にログインを行います。例えばこれはTwitterでの認証とします。以下の処理で、ユーザーがいなければ作成し、ユーザー情報が返却されます。

const twitter = {
	oauth_token: "OAUTH_TOKEN",
	oauth_token_secret: "OAUTH_TOKEN_SECRET",
	oauth_consumer_key: "OAUTH_CONSUMER_KEY",
	consumer_secret: "CONSUMER_SECRET",
	id: "TWITTER_USER_ID",
	screen_name: "TWITTER_SCREEN_NAME"
};

const user = await ncmb.User.loginWith('twitter', twitter);

関連付けるソーシャルログイン

このログインした状態で、続けてソーシャルログイン情報を紐付けます。この時にも loginWith を使います。この時の返却値は特に利用しません。

const expire_date = new Date(3000 * 1000 + (new Date()).getTime()).toJSON();
const date = {
	__type: "Date",
	iso:expire_date
};
const facebook = {
	id: "ID",
  access_token: "TOKEN",
  expiration_date: date
};
// 関連付け
await ncmb.User.loginWith('facebook', facebook);

このように loginWith を使うと、ユーザー情報の authData フィールドに、各ソーシャルサービスの認証情報が紐付きます。

{
  "twitter": {
    // Twitterのソーシャルログイン情報
  },
  "facebook": {
    // Facebookのソーシャルログイン情報
  }
}

同様に、GoogleやAppleの認証も関連付けられます。

注意点

同じソーシャルサービスの別アカウントは利用できません

Twitterは複数アカウントを持っている方も多いですが、1つのアカウントに同じソーシャルサービスの別アカウントは紐付けられません。

匿名認証は紐付けられません

匿名認証もソーシャル認証と同じように authData を使いますが、認証を関連付けることはできません。

パスワード認証と組み合わせられません

ユーザー名とパスワードで認証した後、ソーシャルログインを行っても別アカウントになってしまいました。組み合わせることはできないようなので注意してください。

まとめ

複数のソーシャルサービスによる認証を紐付けておけば、いざ1つのサービスが使えなくなっても安心です。逆に言えば、1つのサービスだけ使っていると万一の際にログインできないユーザーが急増してしまうでしょう。

各ソーシャルサービスでのログインは普通に作ると別々なアカウントになってしまうので注意してください。今回の方法を使って、ソーシャルサービス同士を関連付けてください。