H5 三方登录带参数方案

如何本地测试

法一## 前言

登录的回调地址CALLBACK_URL：window.location.origin + window.location.pathname，获取到的不带参数的地址，一般的活动的地址都不带参数，然后redirect_uri直接设置成CALLBACK_URL即可获取code，再根据获取到的code请求后端获取唯一token。如CALLBACK_URL为：activity.clktec.com/thematic/CM… 登录的链接为：

https://www.facebook.com/v3.2/dialog/oauth?client_id=277238240033784&redirect_uri=${this.CALLBACK_URL}&state=FB&response_type=code&scope=emai

可是，当活动地址带参数，如activity.clktec.com/thematic/re… 就算对CALLBACK_URL进行拼接带上参数，第三方登录返回到回调地址的时候参数也会被截取。所以我们得想个办法获取到参数。

方案

查看auth2.0的文档，发现有个字段就是用来解决这个问题的。

也就是可以在state中放置我们的参数，然后第三方服务器返回code的时候也会原封不动地返回回来。，我这边用前言举的例子，展示一下三方登录之后的链接：

activity.clktec.com/thematic/CM…_

（对，你没有看错，就是这么长！code特别长！）来解释一下结构：redirect_uri/?code=XXXXX&state=FB，是吧，state原封不动地返回了！活动地址没有带参数的时候，平常我们state就放登录类型（FB,TW,Line等），这个请求类型，请求后端的时候需要用到。但是，这样又遇到一个问题，我们需要在state中放多个参数，比如activity.clktec.com/thematic/re… 要target和登录类型type，我们会比较喜欢state='target=47d459f7&type=FB' ,但是这样获取state的时候参数总是会被截断，此时该怎么办呢？

有没有办法将state的值转成一串字符串呢，这样不管我传多少个参数都不用担心被截断，页面获取state的值也方便些呢？答案是肯定有的！将target=47d459f7&type=FB转成Base64不就行了嘛！

import { Base64 } from "js-base64";
const routeParam = Base64.encode('target=47d459f7&type=FB');
window.location.href = `https://www.facebook.com/v3.2/dialog/oauth?client_id=277238240033784&redirect_uri=${this.CALLBACK_URL}&response_type=code&scope=emaihttps://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=qMqJawcDpXNn8xyhMILy&state=${routeParam}&redirect_uri=${this.CALLBACK_URL}`;

此时的state='dGFyZ2V0PTQ3ZDQ1OWY3JnR5cGU9RkI=',对state进行解码Base64.decode('dGFyZ2V0PTQ3ZDQ1OWY3JnR5cGU9RkI')，就可以获取到参数target=47d459f7&type=FB,此时就可以获取到target啦。

如何本地测试

法一

登录内网是无法走通流程的，需要到外网才能测试。但是我们可以手动模拟登录的！有问题及时尽早在内网发现！准备一个已经在外网并且在白名单中的地址，如：activity.clktec.com/thematic/CM… （在FB应用白名单中），并且项目写好登录如何本地测试

法一在浏览器输入：www.facebook.com/v3.2/dialog…

获取到code之后，设置禁止JavaScript。

将带code的链接复制出来：

activity.clktec.com/thematic/CM…_

将前面的回调地址改成内网或者本机地址:

http://192.168.13.150:8668/?code=AQAHzoIOkFi7Pn0V4wd9vntmk6N7BaYEn5n-1tfoOyCxkYmviO_K4tkLxnG1XC3pk4taLqnV3pfExHPqjojzAAXt7G8QP_5jw4cF18Wzn4B3MzK8l41mLOu_LCweihLAVuH_uDa8SK4Z769I9yzkN60Rb20WPUw22AiQRMu0-Me-lssP-JuGaFa3gymML6I6vGPkwwDAtvdPeqHA-PdHQ23NyMhf0c_GhSbkDY5nsTmn9yo5dsFLaevqqw6afZDAIkK18VjY_abK-2_TEtCNNn-dD3utT-v0CH_Pw7d4UCtx__SJOLrzORiqD9v845D10kFeN_RW2-TZhnTR8Yx1tXzi&state=state=%27target=47d459f7&type=FB%27#_=_,

项目已经写好登录逻辑，调用后端登录接口时，记得要把r_url改成activity.clktec.com/thematic/CM…

 const param = {
        code: code,
        game_id: 104,
        login_type: type,
        // r_url: this.CALLBACK_URL,
        r_url: 'https://activity.clktec.com/thematic/CMEFanArtContest/',
    };
   const res = await LoginThird(param);

这样就可以测试登录流程是否成功啦！

法二

取一个可以登录的应用连接，打开控制台的network，将LoginThird请求阻止掉（右击--> block the request）,这样可以拿到链接上的code了，下面流程和法一一样.