web 实现第三方登录_web接入谷歌登录

一、Google 登录（使用 Friebase Google）

1. firebase  创建web 应用，确保已经启用Google 登录（Authentication）
2. 安装firebase 库

   yarn add firebase

3. 在代码中使用

   import {getAuth, GoogleAuthProvider, signInWithPopup} from \'firebase/auth\';// === Firebase 配置 ===（从 Firebase 控制台复制）const firebaseConfig = { apiKey: \"XXXXXXXXXXXXXXXXX\" authDomain: \"xxxxx-xxxxxx.firebaseapp.com\", projectId: \"krga-xxxxxx\", storageBucket: \"xxxxx-xxxxx.firebasestorage.app\", messagingSenderId: \"xxxxxxxxx\", appId: \"1:8XXXXXXXXXx5:web:XXXXXXXXXXXXXXXXX\"};const app = initializeApp(firebaseConfig);const auth = getAuth(app);const googleProvider = new GoogleAuthProvider();const handleGoogleLogin = async () => { try { const result = await signInWithPopup(auth, googleProvider); const user = result.user; //user.uid 唯一标识 //user.email //user.displayName } catch (error) { Toast.show(`Google Sign-in Failed ${error}`) }};

    

二、Facebook 登录（使用 Facebook JavaScript SDK）

1.         引入 SDK

2. Facebook SDK 初始化

    useEffect(() => { // ===== Facebook SDK 初始化 ===== window.fbAsyncInit = function () { window.FB.init({ appId: \'xxxxxxxxx\', //facebook 应用编号 cookie: true, xfbml: true, version: \'v19.0\', }); }; }, []);

3. 登录调用

    const handleFacebookLogin = () => { window.FB.login( (response) => { if (response.authResponse) {  window.FB.api(\'/me\', {fields: \'name,email\'}, (userInfo) => { //userInfo/userInfo.id/userInfo.email/userInfo.name  }); } }, {scope: \'email\'} ); };

4.  登录facebook developer,创建web 应用设置网站地址，并开启Javascript SDK
   

三、Apple 登录（使用 Apple JS）

1. 登录 Apple Developer ，创建服务 ID (Service ID)：

   • 登录 Apple Developer -> Certificates, Identifiers & Profiles。

   • 创建一个 Service ID，并启用“Sign in with Apple

2. 配置回调 URL 和 Web Domain：

   • 设置你的 Web 应用回调 URL（redirect URI）。

   • 设置你的域名（Apple 要求验证网站所有权）。

3. 引入 Apple 登录 JS

4. Apple 登录 SDK 初始化

   useEffect(() => { // ===== Apple 登录 SDK 初始化 ===== window.AppleID.auth.init({ clientId: \'com.xxxx.xxxx\', //ServeId 开发者中获取 scope: \'name email\', redirectURI: \'https://xxx-web.xxxxx.com/login\', //回调地址 usePopup: true, });},[])

5. 登录调用

   const handleAppleLogin = async () => { try { const response = await window.AppleID.auth.signIn(); const idToken = response.authorization.id_token; const payload = parseJwt(idToken); console.log(\"Apple 用户唯一 ID (sub):\", payload); //payload.email payload.name, } catch (error) { Toast.show(`Apple Sign-in Failed ${error}`) }};//从 JWT 中提取并解析 payload 数据为对象const parseJwt = (token) => { const base64Url = token.split(\".\")[1]; const base64 = base64Url.replace(/-/g, \"+\").replace(/_/g, \"/\"); const jsonPayload = decodeURIComponent( window .atob(base64) .split(\"\") .map((c) => \"%\" + (\"00\" + c.charCodeAt(0).toString(16)).slice(-2)) .join(\"\") ); return JSON.parse(jsonPayload);};