ソーシャルログイン Bridge
ネイティブのソーシャルログイン Bridge(Google・Apple・Kakao・Naver・Line・Meta)
概要
unveilyBridge.auth ネームスペースを使うと、ウェブページからネイティブのソーシャルログイン画面を開いて結果を受け取れます。ソーシャルログイン SDK の設定については ソーシャルログインのセットアップ ドキュメントをご確認ください。
対応プロバイダー: google, apple, kakao, naver, line, meta
プロバイダー別の最小プラン
| プロバイダー | 最小プラン | Basic | Standard | Pro |
|---|---|---|---|---|
| Basic | ✓ | ✓ | ✓ | |
| Apple | Basic | ✓ | ✓ | ✓ |
| Kakao | Standard | — | ✓ | ✓ |
| Naver | Standard | — | ✓ | ✓ |
| Line | Standard | — | ✓ | ✓ |
| Meta(Facebook) | Pro | — | — | ✓ |
Google と Apple は Basic プランから利用できます。Kakao / Naver / Line は Standard、Meta は Pro が必要です。
準備状態 — unveilyGlueReady
window.unveilyBridge はページ読み込み前に登録されますが、auth ネームスペースはグルースクリプトが注入された後に利用可能になります。SPA でマウント時に auth.* を呼び出す場合は、先に unveilyGlueReady イベントを待ってください。ボタンクリックなどのユーザー操作からの呼び出しでは、グルーは常に準備済みのため待つ必要はありません。
window.addEventListener('unveilyGlueReady', () => {
// この時点から window.unveilyBridge.auth.* の呼び出しが安全です。
}, { once: true });Android / iOS プラットフォーム別の違い
JS API は Android と iOS で共通です。異なるのはプロバイダーごとのネイティブ実装のみです。
| プロバイダー | Android | iOS |
|---|---|---|
Firebase Auth(google-services.json)— idToken を返却 | Firebase Auth(GoogleService-Info.plist)— idToken を返却 | |
| Apple | Firebase Auth(apple.com プロバイダー)— Firebase idToken を返却 | ネイティブ Sign in with Apple — idToken + authorizationCode を返却 |
| Kakao | Kakao SDK | 今後の iOS SDK アップデートで提供予定 |
| Naver | Naver SDK | 今後の iOS SDK アップデートで提供予定 |
| Line | LINE SDK | 今後の iOS SDK アップデートで提供予定 |
| Meta | Facebook SDK | 今後の iOS SDK アップデートで提供予定 |
Apple ログイン
Android の Apple ログインは Firebase Auth の apple.com プロバイダーで処理され、Firebase idToken を返します。(従来の Web OAuth / カスタム callbackUrl 方式は廃止されました。)iOS の Apple ログインはネイティブ Sign in with Apple を使用し、idToken に加えて Apple 専用の authorizationCode を返します。
iOS の Kakao / Naver / Line / Meta
kakao・naver・line・meta は Android では現在すべて利用可能です。iOS では現在 Apple と Google のみ有効になっているため、それ以外のプロバイダーは SDK_NOT_READY エラーを返す場合があります。これらのプロバイダーの iOS 対応は今後の SDK アップデートで提供予定です。
API
socialLogin
ソーシャルログインを実行します。callback は結果を受け取るグローバル関数の**名前(文字列)**で、省略するとデフォルトの onSocialLoginResult が使われます。位置引数形式 socialLogin(provider, callback) にも対応しています。
window.unveilyBridge.auth.socialLogin({
provider: "google", // "google" | "apple" | "kakao" | "naver" | "line" | "meta"
callback: "onSocialLoginResult"
});
// 位置引数の形式でも同様に動作します:
// window.unveilyBridge.auth.socialLogin("google", "onSocialLoginResult");
function onSocialLoginResult(result) {
if (!result.success) {
// 失敗 — { success:false, provider, error, requiredTier? }
console.error("ログイン失敗:", result.provider, result.error, result.requiredTier);
return;
}
const { provider, uid, displayName, email, profileImage, idToken } = result;
// idToken は google と apple のみで提供されます(Firebase)。
// サーバーに送信して検証してください。
if (idToken) sendToServer({ provider, idToken });
}結果は JSON オブジェクト
コールバックは文字列ではなく単一の JSON オブジェクトを引数として受け取ります。JSON.parse() は不要です。
成功レスポンスの構造
{
"success": true,
"provider": "google",
"uid": "firebase-or-provider-uid",
"displayName": "山田太郎",
"email": "[email protected]",
"profileImage": "https://...",
"idToken": "eyJ..."
}idTokenは google, apple のみで含まれます(Firebase)。kakao / naver / line / meta はネイティブ SDK で処理され、idTokenはありません。- iOS の Apple ログインでは、これに加えて Apple 専用の
authorizationCodeフィールドが返されます。
失敗レスポンスの構造
{
"success": false,
"provider": "kakao",
"error": "FEATURE_NOT_ALLOWED",
"requiredTier": "standard"
}requiredTier は、プラン不足でログインが失敗した際に必要な最小プランを示します。UI でのアップグレード案内に活用できます。
logout
現在ログインしているソーシャルアカウントからログアウトします。callback のデフォルトは onSocialAuthResult です。
window.unveilyBridge.auth.logout({
provider: "kakao",
callback: "onSocialAuthResult"
});revoke
ソーシャルアカウントの連携を解除します。(アプリから完全に退会するときに使います)callback のデフォルトは onSocialAuthResult です。
window.unveilyBridge.auth.revoke({
provider: "google",
callback: "onSocialAuthResult"
});
function onSocialAuthResult(result) {
// { success, action: "logout" | "revoke", provider, error? }
console.log(result.action, result.provider, result.success);
}エラーコード
ログイン / ログアウト / 連携解除の失敗時、error フィールドに次のいずれかが返されます。
| コード | 意味 |
|---|---|
INVALID_PARAMS | 必須パラメータの欠落または形式エラー |
FEATURE_NOT_ALLOWED | 現在のプランで許可されていないプロバイダー(requiredTier 参照) |
PROVIDER_DISABLED | 該当プロバイダーが設定で無効化されている |
SDK_NOT_CONFIGURED | プロバイダー SDK の設定不足(キー / クライアント ID など) |
SDK_NOT_READY | SDK がまだ準備できていない(例: iOS の Apple/Google 以外のプロバイダー) |
UNKNOWN_PROVIDER | 認識できないプロバイダー名 |
LOGIN_CANCELLED | ユーザーがログイン画面を閉じた |
サーバー側のトークン検証
idToken は必ずサーバーで検証してください。クライアントだけで処理しないでください。idToken は google, apple ログインでのみ提供されます。
ソーシャルログイン成功後に受け取った idToken をサーバーに渡して検証します。
// Express.js の例
const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);
app.post('/api/auth/social', async (req, res) => {
const { provider, idToken } = req.body;
if (provider === 'google') {
const ticket = await client.verifyIdToken({
idToken,
audience: process.env.GOOGLE_CLIENT_ID
});
const payload = ticket.getPayload();
const user = await findOrCreateUser({ email: payload.email, name: payload.name });
const sessionToken = generateSessionToken(user);
res.json({ token: sessionToken, user });
}
});// ASP.NET Core の例
[HttpPost("auth/social")]
public async Task<IActionResult> SocialLogin([FromBody] SocialLoginRequest request)
{
if (request.Provider == "google")
{
var payload = await GoogleJsonWebSignature.ValidateAsync(request.IdToken,
new GoogleJsonWebSignature.ValidationSettings {
Audience = new[] { _config["Google:ClientId"] }
});
var user = await _userService.FindOrCreateAsync(payload.Email, payload.Name);
var token = _tokenService.Generate(user);
return Ok(new { token, user });
}
return BadRequest();
}// Spring Boot の例
@PostMapping("/api/auth/social")
public ResponseEntity<?> socialLogin(@RequestBody SocialLoginRequest request) {
if ("google".equals(request.getProvider())) {
GoogleIdTokenVerifier verifier = new GoogleIdTokenVerifier.Builder(
new NetHttpTransport(), JacksonFactory.getDefaultInstance())
.setAudience(Collections.singletonList(googleClientId))
.build();
GoogleIdToken idToken = verifier.verify(request.getIdToken());
if (idToken != null) {
GoogleIdToken.Payload payload = idToken.getPayload();
User user = userService.findOrCreate(payload.getEmail(), (String) payload.get("name"));
String token = tokenService.generate(user);
return ResponseEntity.ok(Map.of("token", token, "user", user));
}
}
return ResponseEntity.badRequest().build();
}<?php
// PHP の例(google-api-php-client を使用)
require_once 'vendor/autoload.php';
$client = new Google_Client(['client_id' => $_ENV['GOOGLE_CLIENT_ID']]);
$data = json_decode(file_get_contents('php://input'), true);
if ($data['provider'] === 'google') {
$payload = $client->verifyIdToken($data['idToken']);
if ($payload) {
$user = findOrCreateUser($payload['email'], $payload['name']);
$token = generateToken($user);
echo json_encode(['token' => $token, 'user' => $user]);
} else {
http_response_code(401);
}
}<%
' Classic ASP の例 — Google トークンの検証はサーバーサイドライブラリ
' または Google tokeninfo エンドポイントで行います。
Dim idToken, provider
idToken = Request.Form("idToken")
provider = Request.Form("provider")
If provider = "google" Then
' Google tokeninfo API を呼び出す
Dim url, http
url = "https://oauth2.googleapis.com/tokeninfo?id_token=" & idToken
Set http = Server.CreateObject("MSXML2.ServerXMLHTTP")
http.Open "GET", url, False
http.Send
If http.Status = 200 Then
' 検証成功 — ユーザーを処理
Response.ContentType = "application/json"
Response.Write "{""success"": true}"
Else
Response.Status = "401 Unauthorized"
End If
End If
%>