草庐IT

记录--uniapp登录流程详解uni.login

林恒 2023-03-28 原文

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

uni.login(OBJECT)登录

H5平台登陆注意事项:

微信内嵌浏览器运行H5版时,可通过js sdk实现微信登陆,需要引入一个单独的js,详见普通浏览器上实现微信登陆,并非开放API,需要向微信申请,仅个别开发者有此权限H5平台的其他登陆,比如QQ登陆、微博登陆,uni-app未封装,请在条件编译里按普通H5写法编写。

OBJECT 参数说明

参数名 类型 必填 说明 平台差异说明provider String 否 登录服务提供商,通过 uni.getProvider 获取,如果不设置则弹出登录列表选择界面
scopes String/Array 见平台差异说明 授权类型,默认 authbase。支持 authbase(静默授权)/ authuser(主动授权) / authzhima(芝麻信用) 支付宝小程序timeout Number 否 超时时间,单位ms 微信小程序、百度小程序success Function 否 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

success 返回参数说明

参数名 说明authResult 登录服务商提供的登录信息,服务商不同返回的结果不完全相同errMsg 描述信息

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
  }
});

uni.checkSession检查登录状态是否过期

属性 类型 必填 说明success function 否 接口调用成功的回调函数fail function 否 接口调用失败的回调函数complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)

uni.getUserInfo(OBJECT)获取用户信息。

UNI-APP 开发微信公众号(H5)JSSDK 的使用方式

在 uniapp 中可以使用模块方式引用微信 js-sdk ,微信官网直接下载的使用有问题,可以使用 jweixin-module。

安装

下载使用方式下载地址:https://unpkg.com/jweixin-module@1.4.1/out/index.js

使用

var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});

小程序:

1、使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

2、使用 open-data 展示用户基本信息。

详情参考文档:

https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

provider String 否 登录服务提供商,通过 uni.getProvider 获取
withCredentials Boolean 否 是否带上登录态信息。 微信小程序、头条小程序lang Number 否 指定返回用户信息的语言,默认为 en。更多值请参考下面的说明。 微信小程序timeout Number 否 超时时间,单位 ms。 微信小程序success Function 否 接口调用成功的回调
fail Function 否 接口调用失败的回调函数
complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)

userInfo 参数说明

参数 类型 说明 平台差异说明nickName String 用户昵称
openId String 该服务商唯一用户标识 5+AppavatarUrl String 用户头像

uni.login({
  provider: 'weixin',
  success: function (loginRes) {
    console.log(loginRes.authResult);
    // 获取用户信息
    uni.getUserInfo({
      provider: 'weixin',
      success: function (infoRes) {
        console.log('用户昵称为:' + infoRes.userInfo.nickName);
      }
    });
  }
});

说明:调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份。

注意:

会话密钥 session_key 是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥。临时登录凭证 code 只能使用一次

uni.getProvider(OBJECT)获取服务供应商。仅App平台支持。

在App平台,可用的服务商,是打包环境中配置的服务商,与手机端安装了什么app没有关系。

云打包在manifest中配置相关模块和SDK信息,离线打包在原生工程中配置。某个服务商配置被打包进去,运行时就能得到相应的服务供应商。

uniapp 微信小程序授权后获取用户信息:Padding is invalid and cannot be removed报错解析

报错原因:

是因为在调用uni.login时,可能会刷新登录状态。通过uni.login获取到的code请求到的session_key,在请求获取手机号时所需的参数值不一致所导致的报错。

解决办法:

在onLoad生命周期,先获取code,再使用wx.getUserInfo配合后端接口获取手机号即可。我这里只写前端处理,后端api接口请根据官方文档编写。

代码片段:

<template>
<button open-type="getPhoneNumber" @getphonenumber="wxLogin" class="wxLogin_Btn">使用微信登录</button>
</template>
<script>
	import {GetUserSessionKeyAndOpenid,WXLogin} from '../api.js'
	export default{
		data(){
			return{
				wxUserCode:'',
			}
		},
		onLoad(){
				this.getWxUserCode();
			},
		methods:{
			getWxUserCode(){
				let that = this;
				//先登录,获取用户code
				uni.login({
					provider: 'weixin',
					success: res => {
						that.wxUserCode = res.code;
					}
				})
			},
			//微信一键登录
			wxLogin(e){
				const that = this;
				if(that.wxUserCode == ''){
					that.$refs.uToast.show({
						title:'微信登录授权失败',
						type: 'error'
					})
					that.getWxUserCode();
					return false;
				}
				beginLoading('登录中...');
				const getSessionParam ={
					code:that.wxUserCode
				}
				//获取用户session_key和openid
				GetUserSessionKeyAndOpenid(that,getSessionParam).then(sessionKeyAndOpenidRes =>{
					wx.getSetting({
					  success: res => {
						if (res.authSetting['scope.userInfo']) {
						  // 已经授权,可以直接调用 getUserInfo 获取头像昵称
						  wx.getUserInfo({
							success: res => {
							 if(e.detail.errMsg != 'getPhoneNumber:ok'){
								 endLoading();
								 that.$refs.uToast.show({
									title:'获取个人信息失败',
									type: 'error'
								 })
								 that.getWxUserCode();
								 return false;
							 }
							 const param = {
								session_key:sessionKeyAndOpenidRes.Data.session_key,
								iv:e.detail.iv,
								encryptedData:e.detail.encryptedData
							 }
							 //调用后端api,获取手机号
							 WXLogin(that,param).then(wxLoginRes =>{})
							}
						  })
						}
					  }
					})
				})
			},
		},
	}
</script>

本文转载于:

https://blog.csdn.net/qq_40615333/article/details/120200204

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

有关记录--uniapp登录流程详解uni.login的更多相关文章

  1. ruby - Sinatra:运行 rspec 测试时记录噪音 - 2

    Sinatra新手;我正在运行一些rspec测试,但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音?我仔细检查了环境是否设置为:test,这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/

  2. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型,即Invoice和Invoice_details。一个Invoice_details属于Invoice,一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord,它正在融化我的大脑。deletefromtablewhereid有什么想法吗?我想做的是限制表中的行数。所以,我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看,您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. Ruby 守护进程导致 ActiveRecord 记录器 IOError - 2

    我目前正在用Ruby编写一个项目,它使用ActiveRecordgem进行数据库交互,我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录,因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame

  5. ruby-on-rails - 在 Rails 中更高效地查找或创建多条记录 - 2

    我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时,如果尚不存在将用户连接到该事件的新记录,则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法,例如Model.find_or_cr

  6. ruby - 在模块/类之间共享全局记录器 - 2

    在许多ruby​​类之间共享记录器实例的最佳(正确)方法是什么?现在我只是将记录器创建为全局$logger=Logger.new变量,但我觉得有更好的方法可以在不使用全局变量的情况下执行此操作。如果我有以下内容:moduleFooclassAclassBclassC...classZend在所有类之间共享记录器实例的最佳方式是什么?我是以某种方式在Foo模块中声明/创建记录器还是只是使用全局$logger没问题? 最佳答案 在模块中添加常量:moduleFooLogger=Logger.newclassAclassBclassC..

  7. ruby - Sinatra 中的全局救援和日志记录异常 - 2

    如何在出现异常时指定全局救援,如果您将Sinatra用于API或应用程序,您将如何处理日志记录? 最佳答案 404可以在not_found方法的帮助下处理,例如:not_founddo'Sitedoesnotexist.'end500s可以通过调用带有block的错误方法来处理,例如:errordo"Applicationerror.Plstrylater."end错误的详细信息可以通过request.env中的sinatra.error访问,如下所示:errordo'Anerroroccured:'+request.env['si

  8. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录? - 2

    例如,假设我有一个名为Products的模型,并且在ProductsController中,我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下,在product_listView中,用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是,每次用户选择新的order_by过滤器时,rails是否必须查询,或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序?有没有一种方法可以编写它,以便在用户排序时rails不会重新查询结果

  9. ruby-on-rails - ActiveRecord 如何将现有记录添加到 has_many :through relationship in rails? 中的关联 - 2

    在我的Rails项目中,我有三个模型:classRecipe:recipe_categorizationsaccepts_nested_attributes_for:recipe_categories,allow_destroy::trueendclassCategory:recipe_categorizationsendclassRecipeCategorization通过这个简单的has_many:through设置,我怎样才能像这样获取给定的食谱:@recipe=Recipe.first并根据现有类别向此食谱添加类别,并在相应类别上对其进行更新。所以:@category=#Exi

  10. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系,城市又属于一个州,例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子,但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型,我们在StackOverflow上找到一个类似的问

随机推荐