uniapp微信一键登录

详细步骤:

1. 安装uni-login插件

打开HBuilderX,点击左侧工具栏里的“插件市场”,在搜索框中输入“uni-login”进行搜索,找到该插件并点击“安装”。

2. 配置uni-login插件

在项目根目录下找到manifest.json文件,加入如下配置:

```json
"authorities": {
    "unillogin": {
        "provider": "weixin",
        "appid": "wx*****",  //微信开放平台中的appid
        "scope": "snsapi_login",  //授权作用域,可选snsapi_base或snsapi_login
        "redirect_uri": "http://www.example.com/login-success", //授权回调地址,需要在微信开放平台中配置
        "state": "login" //携带的参数,可自定义
    }
}
```

    需要注意的是,其中的appid需要在微信开放平台中注册并获取,redirect_uri也需要在平台中配置。同时,如果想获取用户的头像、昵称等信息,需要将scope设置为snsapi_login。如果只需要获取用户的openid信息,将scope设置为snsapi_base即可。

3. 调用uni-login插件

在需要使用登录功能的页面中引入uni-login并调用login方法,代码如下:

```javascript
import UniLogin from '@/uni_modules/uni-login/uni-login.js'

UniLogin.login({
    provider: 'weixin',
    success: function(res) {
        console.log(res)
        // 登录成功后的处理逻辑
    },
    fail: function(res) {
        console.log(res)
        // 登录失败后的处理逻辑
    }
})
```

其中,provider参数为uni-login插件中定义的授权提供商,这里需要设置为weixin;success和fail分别为授权成功和失败的回调函数。

4. 配置微信开发者平台

在微信开发者平台中,找到“公众号设置 -> 功能设置 -> 网页授权域名”,添加自己的网站域名,以便用户在授权登录时能够跳转到自己的网站上。

至此,即可实现在uniapp中使用微信一键登录功能。请注意保障用户信息安全,以及合规使用微信开放平台的相关功能。

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值