前端对接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的账号申请不下来 就没弄