本文へスキップ
Unveilydocs

ソーシャルログイン Bridge

ネイティブのソーシャルログイン Bridge(Google・Apple・Kakao・Naver・Line・Meta)

概要

unveilyBridge.auth ネームスペースを使うと、ウェブページからネイティブのソーシャルログイン画面を開いて結果を受け取れます。ソーシャルログイン SDK の設定については ソーシャルログインのセットアップ ドキュメントをご確認ください。

対応プロバイダー: google, apple, kakao, naver, line, meta

プロバイダー別の最小プラン

プロバイダー最小プランBasicStandardPro
GoogleBasic
AppleBasic
KakaoStandard
NaverStandard
LineStandard
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 で共通です。異なるのはプロバイダーごとのネイティブ実装のみです。

プロバイダーAndroidiOS
GoogleFirebase Auth(google-services.json)— idToken を返却Firebase Auth(GoogleService-Info.plist)— idToken を返却
AppleFirebase Auth(apple.com プロバイダー)— Firebase idToken を返却ネイティブ Sign in with Apple — idToken + authorizationCode を返却
KakaoKakao SDK今後の iOS SDK アップデートで提供予定
NaverNaver SDK今後の iOS SDK アップデートで提供予定
LineLINE SDK今後の iOS SDK アップデートで提供予定
MetaFacebook 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

kakaonaverlinemetaAndroid では現在すべて利用可能です。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..."
}
  • idTokengoogle, 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_READYSDK がまだ準備できていない(例: 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
%>

On this page