前端对接x,谷歌auth2.0获取授权码

1，申请x的账号

2，然后登录  地址在这儿 https://x.com/  登陆进去之后呢 就进入这个地址 https://developer.x.com/en/portal/dashboard

如果没有就创建一个

3，配置信息 和获取client_id 和client secret 

        1. 配置信息

点击这个Edit

然后再配置一下回调的url 

website URL 如果是本地调试那么可以随便配一个，然后点击save

这里重新生成 然后记录下来  在前端 

 window.location.href =   ` https://twitter.com/i/oauth2/authorize?
            response_type=code
            &client_id=${sysInfoList.clientId}
            &redirect_uri=${sysInfoList.redirectUrl}
            &scope=tweet.read&tweet.write&offline.access (访问的范围)
            &state=state
            &client_secret=${sysInfoList.secret}
            &code_challenge=${codeChallenge}
            &code_challenge_method=plain`

关于 codeChallenge 这个 要安装一下 crypto-js 这个依赖 

import CryptoJS from 'crypto-js';  

  async generatePKCEChallenge() {
      // 生成一个随机的 code verifier  
      const randomBytes = CryptoJS.lib.WordArray.random(32); // 32 个随机字节  
      this.codeVerifier = randomBytes.toString(CryptoJS.enc.Base64).replace(/[+/=]/g, ''); // 转换为 Base64 并移除填充字符  
      // 使用 S256 (SHA-256) 算法生成 code challenge  
      const hash = CryptoJS.SHA256(this.codeVerifier);
      this.codeChallenge = hash.toString(CryptoJS.enc.Base64).replace(/[+/=]/g, ''); // 转换为 Base64 并移除填充字符  
    }

这样参数就齐全了  就可以唤起 授权页面了

好了 还有谷歌 谷歌相对来说更复杂一点

1，登录goole cloud  在API和服务 下 点击凭据

点击创建凭据 选择  OAuth客户端ID

应用类型选择  Web应用

这样就算配置好了 然后点击  创建

创建完成后回到 凭据页面 

点击下载 就能获取到这样的信息

然后点击这个 

然后 就到最后的调试代码了

    const url =
                    `https://accounts.google.com/o/oauth2/v2/auth?
                    response_type=code  &scope=https://www.googleapis.com/auth/drive.metadata.readonly&include_granted_scopes=trueredirect_uri=http://127.0.0.1:5173&client_id=${sysInfoList.clientId}`

                window.location.href = url

ok 大功告成  

tips:facebook的账号申请不下来 就没弄