H5 三方登录带参数方案

·  阅读 33

如何本地测试

法一## 前言

登录的回调地址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的文档,发现有个字段就是用来解决这个问题的。

image.png 也就是可以在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。

image.png 将带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了,下面流程和法一一样.

分类:
前端
标签: