用户登录

🎉 8 周年订阅优惠

在这个第三方平台提供的身份验证的页面,用户输入用户名还有密码,点击授权以后,在返回的地址里面会包含给我们的授权码。下面我们需要得到这个授权码。

输入用户名 .. 再输入密码 .. 点击授权 ... 在控制台上我们在 state 有变化的时候会输出 state .. 这里有两个 state 里面的 url 这个属性里面,包含的就是重定向到的那个地址,加上一个 code 参数 .. 参数的值就是授权码 ..

我们可以去判断一下,如果这个 url 属性里面包含 code 参数 .. 并且这个 navigationType 的值是 1 的话 .. 我们就去得到这个 code 参数的值 .. 可以使用 code= 作为分割字符串的标签 .. 然后得到分割以后的第二个部分 .. 就是 code= 后面的东西 .. 也就是我们得到的授权码 ..

回到编辑器 .. 找到 onNavigationStateChange 这个方法 .. 这里先去判断一下 .. 用一个 if .. 条件是 state.url 是不是包含 ?code= ... &&  state.navigationType 是不是等于 1 ..

如果是 .. 就去得到 code 参数的值 .. 定义一个变量 .. 名字是 code .. 等于 state.url.split ,去分割一下 url 这个属性的值 .. 使用的标准是 code= .. 然后得到分割以后的第二块内容 ..

得到以后,可以去设置一下组件里的 authCode 这个状态 ... this.setState .. 设置的是 authCode .. 让它的值等于上面得到的 code ..

这里我们再把 onNavigationStateChange 变成一个异步的方法 .. 前面加上一个 async .. 然后再等待设置状态这个动作完成 .. 在它前面加上一个 await ...

async 是 es7 的一个新功能,现在想要使用它的话,可以配置一下项目根目录下的这个 .babelrc .. 这里添加一个 es6.classes .. 还有一个 es7.asyncFunctions ..

完成以后,我们可以在控制台上输出 authCode 这个状态 .. console.log .. 输出 this.state.authCode .. 再去掉输出 state 的这条代码 ...

保存 .. 再到模拟器上去试一下 .. 输入用户名 .. 密码 ... 然后授权 ... 这次在控制台上,会输出得到的授权码 ..

得到 oAuth 用的授权码《 React Native #6:oAuth 》

统计

11470
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点