前言

例如：上篇文章记录了微信的引入式授权登录，当前文章记录一下支付宝拼接URL跳转支付宝登录页授权登录

在这里先说一个注意事项：不要被网上的沙箱给误导了沙箱环境拼接的URL和appID是和正式环境配置的不同这里以正式举例 (https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=SCOPE&redirect_uri=ENCODED_URL)
下方举例注意域名部分

正式环境配置与创建详情见官方文档

正确环境域名为https://openauth.alipay.com以及app_id则为正式的APPID

沙箱环境配置与创建详情见官方文档

沙箱环境域名为https://openauth.alipaydev.com以及app_id则为沙箱的APPID

这里记录一下问题：支付宝授权登录是要加功能的，授权功能名为获取会员信息，添加功能直接搜索就可以了，还有一点就是支付宝和微信的回调域名配置不同，微信为回调域，配置域名就可以,支付宝不同，代码配置的回调地址必须和你的应用中回调地址相同才可以

一、定义获取code方法

在你所要操作登录页面方法中，当前记录实例为回调地址就是我当前页面

  GetUrlParame(parameName) {/// 获取地址栏指定参数的值// 获取url中跟在问号后面的部分var parames = window.location.search;// 检测参数是否存在if (parames.indexOf(parameName) > -1) {var parameValue = "";parameValue = parames.substring(parames.indexOf(parameName),parames.length);// 检测后面是否还有参数if (parameValue.indexOf("&") > -1) {// 去除后面多余的参数, 得到最终 parameName=parameValue 形式的值parameValue = parameValue.substring(0, parameValue.indexOf("&"));// 去掉参数名, 得到最终纯值字符串parameValue = parameValue.replace(parameName + "=", "");return parameValue;}return "";}}

2.拼接URL跳转登录页面

在这里的方法就可以直接入支付宝登录方法中

var code = this.GetUrlParame("auth_code"); // 截取code
if (!code) {//  如果没有code，说明用户还没授权let appID = "你的APPID"; // 你的 APPIdlet redirectUrl = '你自己的回调地址'; // 获取到 auth_code 后的回调地址let authorizeUrl =`https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${appID}&scope=auth_user&redirect_uri=` +`${encodeURIComponent(redirectUrl)}`+`&state=init`;window.location.href = authorizeUrl; // 跳转链接获取code
} else {// 有code，说明用户点击了授权  将获取到的code传递给后台,换取xtoken、用户信息、和userid然后处理你自己的逻辑就可以了http.post("p-alipayUserId-query", { code: code }).then(res => {if (res.code == "ok") {console.log(res)} else {Toast(res.message);}});
}

总结

以上就是今天要讲的内容，本文仅仅简单介绍了支付宝授权登录以及注意事项，适合小白参考，少走弯路

vue2支付宝网页授权登录相关推荐

java支付宝网页授权登录界面_支付宝开发平台之第三方授权登录与获取用户信息...
对于第三方登录,我们常见了,很多应用可以进行第三方登录,我常用的有:QQ.微信.新浪.支付宝等等,今天我们就一起来简单学习一下支付宝第三方授权登录. 打开支付宝开发平台,注册成为开发者,点击开发者中心 ...
java支付宝网页授权登录界面_网页版的支付宝授权登录（vue+java）
api接口文档:https://docs.open.alipay.com/289/105656 后台管理系统原本是用账号密码登录的,不过需求要改成支付宝授权, 前端仅仅需要改登录页,以及添加一个授权返 ...
支付宝网页授权获取用户信息
****** 支付宝网页授权获取用户信息(昵称,头像等)****** 最近有个项目需要获取到支付宝的头像和昵称作为互动数据,作为php新人,对于看文档来说很是痛苦,网上也没有很多关于支付宝网页 ...
php 微信开发网页授权登录,微信开发网页授权登录——2018年6月2日
微信网页授权登录用户同意授权,获取code 通过code,获取网页的access_token 拉取用户信息(scope 为snsapi_userinfo) application\index\cont ...
微信公众号开发（一）微信网页授权登录
微信网页授权登录前期准备授权登录获取微信数据处理授权拒绝前期准备 1.微信公众号开发,首先要搞一个公众号,开发阶段可以申请一个公众平台测试账号. (进入到微信公众公众平台,找到开发者工具,点 ...
PHP微信公众号网页授权登录扫码登录获取用户基本信息
前言现在微信登录是一个网站.APP的标配,所以微信授权登录是我们应该要掌握的.微信授权登录有4种方式: 1.通过微信开放平台 2.通过认证的微信服务号 3.通过认证的微信订阅号 4.通过微信小程序曲 ...
php微信授权ajax,ajax 实现微信网页授权登录
项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个PHPer ,所以,微信开发采用的是 EasyWeCha ...
java ajax 微信网页授权_ajax 实现微信网页授权登录的方法
AJAX 的 ajax 实现微信网页授权登录的方法项目背景因为项目采用前后端完全分离方案,所以,无法使用常规的微信授权登录作法,需要采用 ajax 实现微信授权登录. 需求分析因为本人是一个ph ...
微信网页扫码登录和公众号网页授权登录的比较
最近在做PC二维码扫码登录的功能,总结了一些问题 # 主要区别二者的主要区别: 差异 PC网页扫码登录公众号网页授权登录账号要求需要开放平台账号创建网站应用一个认证过的服务号就可以(也可以使 ...
php订阅号网页登录,微信订阅号怎么使用网页授权登录
微信公众号配置网页授权域名怎么设置? 提示:无法访问banma13.tunnel.phpor.me指向的web服务器(或虚拟主机)打开微信公众平台,输入账号密码登录后台. 如果爱上一个人,请不要炫耀, ...

vue2支付宝网页授权登录

前言

一、定义获取code方法

2.拼接URL跳转登录页面

总结

vue2支付宝网页授权登录相关推荐

最新文章

热门文章