Web 应用接入 OAuth2

https://github.com/login/oauth/authorize?client_id=5a179b878a9f6ac42acd&
redirect_uri=https%3A%2F%2Fgitee.com%2Fauth%2Fgithub%2Fcallback&
response_type=code&scope=user&
state=bc9c9fb74d0aa

https://gitee.com/auth/github/callback?code=9c637527cce64b8a5736&state=bc9cfa

app client 向 app server 请求 oauth url
app client 收到 url ，点击事件触发访问 oauth url，
跳转到 apple id server
用户在 apple id server web应用登录授权
apple id server 以 post 方式 回调 app server 的redirect url，并携带了code、id_token、user(仅第一次授权会返回)参数
app server 向 apple id server 验证 authorization code
app server 用 apple id server 提供的公钥解密 id_token，校验 id_token 参数
app server 验证 authorization code 和 id_token 是在同一个请求下发的
app server 成功返回用户信息给 app client

redirectURI = 'https://xx.xxx.online/login/oauth-url' // 自己设置的重定向域名，可添加多个
webClientId = 'com.xx.cn';  // 设置的client_id，一般是域名的反写
teamId = 'xx';  // 10个字符的team_id
keyId = 'KOI23S78J6';  // 获取的10个字符的密钥标识符

// 1\页面注入js sdk
<script  type="text/javascript" defer src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
></script>

// 2\初始化
useEffect(() => {
  AppleID.auth.init({
    clientId: APPLEKey,
    scope: 'email name',
    usePopup: true,
    redirectURI: redirectUrl,
    state: 'init00state',
    responseType: 'code', // 有效值为code和id_token。
  });
}, [APPLEKey]);


// 3\触发调用 将返回一个 promise 对象，该对象将在授权成功时解析。
const data = await AppleID?.auth?.signIn({
    clientId: APPLEKey,
    scope: 'email name',
    redirectURI: redirectUrl,
    state: 'signIn00state',
    responseType: 'code',
    responseDode: 'fragment',
    usePopup: true,
);
 console.log('APPLE signIn 的回调 datadatadata:', data);

// 4\处理响应、与自己的登录接口做交互，返回用户info，完成登录。
if (data?.authorization?.code) {
  const authTokenLocal = jwt.decode(data?.authorization?.id_token) || {};
  const oauthOpenId = get(authTokenLocal, 'sub');
  	handleLogin({
      oauthToken:authTokenLocal,
      oauthOpenId,
      platform: OAUTH_LOGIN_PLATFORM_TYPE.APPLE
    });
}

{
  "authorization": {
    "code": "c0888ff1fe3d44df1ba57b4b7212d3081.0.rrvqs.m7NZ8kqhFhaYjpA1OTzNKA",
    "id_token": "eyJraRydWV9.NAGHwx9r_KQGnFksS_4aGx1w",
    "state": "signIn00state"
  }
}

// jwt.decode(response.authorization.id_token) 解析后的值：
{
     "authorization": {
       "code": "[CODE]",
       "id_token": "[ID_TOKEN]",
       "state": "[STATE]"
     },
     "user": {
       "email": "[EMAIL]",
       "name": {
         "firstName": "[FIRST_NAME]",
         "lastName": "[LAST_NAME]"
       }
     }
}

https://appleid.apple.com/auth/authorize?client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URI]&response_type=[RESPONSE_TYPE]&scope=[SCOPES]&response_mode=[RESPONSE_MODE]&state=[STATE]

// 自定义按钮，这里是从 Apple JS 生成的 URL。
https://appleid.apple.com/auth/authorize?client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URL]&response_type=code id_token&state=[STATE]&scope=[SCOPES]&response_mode=form_post

https://appleid.apple.com/auth/oauth2/v2/authorize

  const oauthSignInApple = (key) =>{
    const url = 'https://appleid.apple.com/auth/authorize';
    const appleBookForm = document.createElement('form');

    appleBookForm.setAttribute('method', 'GET');
    appleBookForm.setAttribute('action', url);
    const params = {
      client_id: key?.clientId,
      redirect_uri: key?.redirectUrl,
      response_type: 'code',
      scope: 'email name',
      response_mode:'form_post',
      state: OAUTH_LOGIN_PLATFORM_TYPE.APPLE,
      usePopup: false,
    };

    // Add form parameters as hidden input values.
    // eslint-disable-next-line no-restricted-syntax
    for (const p in params) {
      const input = document.createElement("input");
      input.setAttribute("type", "hidden");
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      appleBookForm.appendChild(input);
    }
    document.body.appendChild(appleBookForm);
    appleBookForm.submit();
  }

func oauthLogin(type: String) {
        // val GitHub、Google、SignInWithApple
        let redirectUrl = "配置的 URL Types"
        let loginURL = Configuration.shared.awsConfiguration.authURL + "/authorize" + "?identity_provider=" + type + "&redirect_uri=" + redirectUri + "&response_type=CODE&client_id=" + Configuration.shared.awsConfiguration.appClientId
        session = ASWebAuthenticationSession(url: URL(string: loginURL)!, callbackURLScheme: redirectUri) { url, error in
            if error != nil {
                return
            }
            if let responseURL = url?.absoluteString {
                let components = responseURL.components(separatedBy: "#")
                for item in components {
                    if item.contains("code") {
                        let tokens = item.components(separatedBy: "&")
                        for token in tokens {
                            if token.contains("code") {
                                let idTokenInfo = token.components(separatedBy: "=")
                                if idTokenInfo.count > 1 {
                                    let code = idTokenInfo[1]
                                    print("身份验证 code 码: \(code)")
                                    return
                                }
                            }
                        }
                    }
                }
            }
        }
        session.presentationContextProvider = self





// 版本2

// 在 iOS 12 中，ASWebAuthenticationSession 如果沒有 strong reference 的話就會消失掉，所以這邊先建立一個變數並放到 completion handler 裡，成為它的 strong reference。
var session: ASWebAuthenticationSession?

// 提供獲取 authorization code 用的 URL 與回傳 URL 的 scheme。
// 當使用者成功授權後，授權伺服器會傳送回傳 URL 給 session，而 session 會直接關掉瀏覽器並呼叫 completionHandler。
session = ASWebAuthenticationSession(url: url, callbackURLScheme: "app", completionHandler:  { callbackURL, error in

    // 使用者成功授權後，從回傳 URL 中抽取 authorization code 以進行後續步驟。

    session = nil
})

// 提供 session 用來顯示的視窗。
session?.presentationContextProvider = presentationContextProvider

// 告訴 session 啟動流程。
session?.start()

/*
  * Create form to request access token from Google's OAuth 2.0 server.
  */
const oauthSignIn = (key) => {
  // Google's OAuth 2.0 endpoint for requesting an access token
  const oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  const googleForm = document.createElement('form');
  googleForm.setAttribute('method', 'GET'); // Send as a GET request.
  googleForm.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  const params = {
    client_id:clientId,
    redirect_uri: redirectUrl,
    response_type: 'code',
    scope: 'https://www.googleapis.com/auth/userinfo.profile',
    include_granted_scopes: "true",
    state: OAUTH_LOGIN_PLATFORM_TYPE.GOOGLE,
  };

  // Add form parameters as hidden input values.
  // eslint-disable-next-line no-restricted-syntax
  for (const p in params) {
    const input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    googleForm.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(googleForm);
  googleForm.submit();
};

// 正确响应：code交给自己的服务器api，完成后续操作。
http://oauth2.example.com/callback?state=G&code=4%2F0AfJohXmMnygj-k1dcfv8k8bObKZOkeg&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none

// 错误响应：
https://oauth2.example.com/callback#error=access_denied

// 传统 web登录
useEffect(() => {
  initGoogleScript();
}, []);


// eslint-disable-next-line no-unused-vars
const initGoogleScript = () => {
  // const script = document.createElement('script');
  // script.src = 'https://accounts.google.com/gsi/client';
  // document.head.append(script);
  function handleCredentialResponse(response) {
    const authTokenLocal = jwt.decode(response.credential) || {};
    console.log("GOOGLE 回调 authTokenLocal", response.credential,authTokenLocal);
    const oauthOpenId = get(authTokenLocal, 'sub');
    // const email = get(authTokenLocal, 'email');
    // 如果是走前端自己组织的URL，才和APP相同的处理函数
    if (oauthOpenId) {
      loginSuccess(res);
    }
  }

  loadScript('https://accounts.google.com/gsi/client', () => {
    console.log('loadScript....');
    try {
      // eslint-disable-next-line no-undef
      google.accounts.id.initialize({
        client_id: '643984392818-v2aad7hxx3r65h29imbq4d.apps.googleusercontent.com', //  GOOGLE_CLIENT_ID,
        callback: handleCredentialResponse,
      });

      // eslint-disable-next-line no-undef
      google.accounts.id.renderButton(
        document.getElementById('btn-google-login'),
        {
          icon: 'standard',
          type: 'icon',
          shape: 'circle',
          theme: 'outline',
          text: 'signin_with',
          size: 'large',
        }, // customization attributes
      );
      // google.accounts.id.prompt(); // also display the One Tap dialog
    } catch {
      //
    }
  });
};



// 动态加载Google js sdk 的
export const loadScript = (url, callback) => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  // script.async = 'async';
  script.async = true;
  script.src = url;
  document.body.appendChild(script);
  if (script.readyState) {
    // IE
    script.onreadystatechange = () => {
      if (script.readyState === 'complete' || script.readyState === 'loaded') {
        script.onreadystatechange = null;
        callback();
      }
    };
  } else {
    // 非IE
    script.onload = () => {
      callback();
    };
  }
};


// 登录成功桥接 app 的方法
const loginSuccess = resp => {
  console.log(' 登录成功桥接 app 的方法', resp);
  const { token } = resp || {};
  if (token && window?.uc) {
    window?.uc.loginSuccess(JSON.stringify(resp));
  }
};



// 下面交给 APP 桥接 loginSuccess 处理了
/*
const { userInfo, refreshToken, token, tokenExpiryDate } = res;
const initApp = {};
if (refreshToken) {
  let obj = { ...initApp, token, refreshToken };
  if (userInfo) {
    obj = {
      ...obj,
      userInfo: { ...userInfo },
      tokenExpiryDate,
    };
  }
  window.localStorage.setItem('initApp', JSON.stringify(obj));
} */

{
    "iss": "https://accounts.google.com",
    "azp": "81003223604-bkldme1v3h23gjhrhaircmc8up16or.apps.googleusercontent.com",
    "aud": "8100253423604-bkldme1v3hoh423rhaircmc8up16or.apps.googleusercontent.com",
    "sub": "102254845571180493426",
    "email": "majinyun0k@gmail.com",
    "email_verified": true,
    "nbf": 1698739691,
    "name": "yun 1",
    "picture": "https://lh3.googleusercontent.com/a/ACg8ocI8ip3BmBXZJLyK8YIJqzN86nbmrF1AboScE8Gk1MdVR2Y=s96-c",
    "given_name": "yun",
    "family_name": "Mark",
    "locale": "zh-CN",
    "iat": 1698739991,
    "exp": 1698743591,
    "jti": "cc011e8dc96a4f788af3c"
}

https://developers.facebook.com/apps/xx2992667/settings/basic/
账号
1014xx2992667
口令：
b1ce44exxxbca231

<script type="text/javascript" defer  src="https://connect.facebook.net/en_US/sdk.js" ></script>


// 初始化
useEffect(() => {
   FB?.init({
      appId: FACEBOOKKey,
      xfbml: true,
      cookie: true,
      version: 'v18.0',
 });
}, []);



// 触发事件
FB.login(function(response) {
   if (response.status === 'connected') {
   	 statusChangeCallback(response);
   }
});

// 也可以调用 FB.getLoginStatus检查登录状态
FB.getLoginStatus(function(response) {

   if (response.status === 'connected') {
   	 statusChangeCallback(response);
   }
});

// response
{
    status: 'connected',
    authResponse: {
        accessToken: '...',
        expiresIn:'...',
        reauthorize_required_in:'...'
        signedRequest:'...',
        userID:'...'
    }
}


//statusChangeCallback 处理逻辑
  const authTokenLocal = jwt.decode(response?.authResponse?.accessToken) || {};
  const oauthOpenId = get(authTokenLocal, 'sub');
  console.log('FACEBOOK signIn 解析后的 authTokenLocal:', authTokenLocal);
  handleOauthLogin({
    // eslint-disable-next-line camelcase
    oauthToken: response?.authResponse?.accessToken,
    oauthOpenId,
    platform: 'F',
    version: '',
    // email,
  });

{
    "authResponse": {
        "userID": "861892xxx14591",
        "expiresIn": 516xx03,
        "accessToken": "EAAj1IkmDxFEu6XfenkWOgZAinMdX6dG2gdrrGB719B56h2e81ZCxZCgwhgvLfwpciNcZD",
        "signedRequest": "jd9",
        "graphDomain": "facebook",
        "data_access_expiration_time": 170xx47
    },
    "status": "connected"
}

https://www.facebook.com/v11.0/dialog/oauth?
  client_id={app-id} // Replace with your application’s ID
  &scope=openid
  &response_type=code
  &redirect_uri={"https://www.domain.com/login"}  // Replace with your Redirect URI
  &state={"state123abc"} // Replace with your State param
  &code_challenge={"E91k-123k123-115X"} // Replace with your generated code_challenge
  &code_challenge_method=S256 // Replace with the method used to generate the code_challenge
  $nonce={"123"} // Replace with a randomly generated nonce value


// 返回值，拿着code 去这个接口换口令令牌  /oauth/access_token
https://www.domain.com/login?state=state123abc&code={authorization-code}


发出请求

 /*
  * Create form to request access token from Google's OAuth 2.0 server.
  */
  const oauthSignInGoogle = (key) => {
    // Google's OAuth 2.0 endpoint for requesting an access token
    const oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create <form> element to submit parameters to OAuth 2.0 endpoint.
    const googleForm = document.createElement('form');
    googleForm.setAttribute('method', 'GET'); // Send as a GET request.
    googleForm.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    const params = {
      client_id: key?.clientId,
      redirect_uri: 'http://localhost:8000/userCenter/login/SignIn', // key.redirectUrl,
      response_type: 'code',
      scope: 'https://www.googleapis.com/auth/userinfo.profile',
      include_granted_scopes: "true",
      state: OAUTH_LOGIN_PLATFORM_TYPE.GOOGLE,
    };

    // Add form parameters as hidden input values.
    // eslint-disable-next-line no-restricted-syntax
    for (const p in params) {
      const input = document.createElement("input");
      input.setAttribute("type", "hidden");
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      googleForm.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(googleForm);
    googleForm.submit();
  };

https://www.facebook.com/v18.0/dialog/oauth?
    client_id={app-id}
    &redirect_uri={redirect-uri}
    &auth_type=rerequest
    scope=email