原視頻鏈接
https://www.bilibili.com/video/BV1mg4y1s75r/?spm_id_from=333.337.search-card.all.click&vd_source=c15794e732e28886fefab201ec9c6253
1 前言
結(jié)合RuoYi-Cloud和RuoYi-App實(shí)現(xiàn)微信小程序的授權(quán)登錄。
之前講過前后端分離版的授權(quán)登錄，邏輯大致一致，不同點(diǎn)有：
- 微信頭像和昵稱的獲取方式。由于最新的本地庫(kù)通過
getUserProfile和getUserInfo獲取不到用戶頭像和昵稱。采用頭像昵稱填寫功能。（備注：https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01） - 微服務(wù)端采用
OpenFeign進(jìn)行遠(yuǎn)程調(diào)用，不會(huì)遠(yuǎn)程調(diào)用的粉絲，可以學(xué)習(xí)一下。Feign的底層是Spring3.0的RestTemplate，若依的RestTemplate又借助于OkHttp。相對(duì)于Feign本身來(lái)講，OpenFeign是支持Spring MVC的注解的，用起來(lái)非常方便。
1.1 環(huán)境準(zhǔn)備
- 下載
RuoYi-Cloud代碼
添加鏈接描述https://gitee.com/y_project/RuoYi-Cloud - 下載
RuoYi-App代碼
https://gitee.com/y_project/RuoYi-App
1.2 登錄流程圖
2 小程序代碼
- 微信開發(fā)者工具基礎(chǔ)庫(kù)用的
2.30.* -
app模塊配置微信登錄
- 使用自己的
appid
2.1 RuoYi-App編輯api/login.js
- 登錄、退出接口路徑加
/auth - 獲取用戶信息接口路徑加
/system - 獲取驗(yàn)證碼接口路徑換成
/code
import request from '@/utils/request'
// 登錄方法
export function login(username, password, code, uuid) {
const data = {
username,
password,
code,
uuid
}
return request({
'url': '/auth/login',
headers: {
isToken: false
},
'method': 'post',
'data': data
})
}
// 獲取用戶詳細(xì)信息
export function getInfo() {
return request({
'url': '/system/user/getInfo',
'method': 'get'
})
}
// 退出方法
export function logout() {
return request({
'url': '/auth/logout',
'method': 'delete'
})
}
// 獲取驗(yàn)證碼
export function getCodeImg() {
return request({
'url': '/code',
headers: {
isToken: false
},
method: 'get',
timeout: 20000
})
}
2.4 新增按鈕微信授權(quán)登錄
- 在登錄按鈕下，新增微信授權(quán)登錄按鈕
<button @click="wxHandleLogin" class="login-btn cu-btn block bg-green lg round">微信授權(quán)登錄</button>
2.6 新增wxHandleLogin方法獲取code
// 微信登錄
async wxHandleLogin() {
uni.getProvider({
service:'Oauth',
success: (res) => {
console.log(res);
if(res.provider.indexOf("WeiXin")){
//登錄
uni.login({
provider:'WeiXin',
success: (loginRes) => {
}
})
}
}
})
}
2.9 創(chuàng)建sendWxLoginFormToLocalService方法
//向本地服務(wù)發(fā)起請(qǐng)求
sendWxLoginFormToLocalService(){
console.log("向后端發(fā)起請(qǐng)求" + this.wxLoginForm);
this.$store.dispatch('wxLogin', this.wxLoginForm).then(() => {
this.$modal.closeLoading()
}).catch(() => {
})
}
3 微服務(wù)代碼
3.5 auth服務(wù)TokenController添加接口wxLogin
public R<?> wxLogin(@RequestBody WxLoginBody wxLoginBody){
String code = wxLoginBody.getCode();
//想微信服務(wù)器發(fā)送請(qǐng)求獲取用戶信息
String url = "https://api.weixin.qq.com/sns/jscode2session?appid=" + wxAppConfig.getAppId() + "&secret=" + wxAppConfig.getAppSecret() + "&js_code=" + code + "&grant_type=authorizatinon_code";
String res = restTemplate.getForObject(url, String.class);
JSONObject jsonObject = JSONObject.parseObject(res);
//獲取session_key和openid
String sessionKey = jsonObject.getString("session_key");
String openid = jsonObject.getString("openid");
if (StringUtils.hasText(openid)){
// 如果解析成功,獲取token
LoginUser userInfo = sysLoginService.wxLogin(openid);
// 獲取登錄token
return R.ok(tokenService.createToken(userInfo));
}else{
return R.fail("微信登錄失敗！");
}
}
3.7 ruoyi-api模塊新增遠(yuǎn)程調(diào)用
/**
* 通過openid查詢用戶信息
*
* @param openid openid 用戶唯一標(biāo)識(shí)
* @param source 請(qǐng)求來(lái)源
* @return 結(jié)果
*/
@GetMapping("/user/getInfoByOpenid/{openid}")
public R<LoginUser> getInfoByOpenid(@PathVariable("openid") String openid, @RequestHeader(SecurityConstants.FROM_SOURCE) String source);
3.9 system服務(wù)SysUserController新增內(nèi)部接口getInfoByOpenid和addWxUser
- 數(shù)據(jù)庫(kù)添加
unionId和openId - domain （SysUser）
/** unionId */
private String unionId;
/** openId */
private String openId;
public String getUnionId() {
return unionId;
}
public void setUnionId(String unionId) {
this.unionId = unionId;
}
public String getOpenId() {
return openId;
}
public void setOpenId(String openId) {
this.openId = openId;
}
- controller 層（SysUserController）
/**
* 根據(jù)openid獲取當(dāng)前用戶信息
*/
public R<LoginUser> getInfoByOpenid(@PathVariable("openid") String openid)
{
SysUser sysUser = userService.selectUserByOpenid(openid);
LoginUser sysUserVo = new LoginUser();
if (StringUtils.isNull(sysUser))
{
sysUserVo.setSysUser(null);
return R.ok(sysUserVo);
}
return R.ok(sysUserVo);
}
/**
* 新增微信用戶信息
*/
public R<SysUser> addWxUser(@RequestBody SysUser sysUser)
{
String username = sysUser.getUserName();
userService.insertWxUser(sysUser);
return R.ok(sysUser);
}
- service 層（SysUserServiceImpl）
接口：
/**
* 通過openid查詢用戶
*
* @param openid 用戶唯一標(biāo)識(shí)
* @return 用戶對(duì)象信息
*/
public SysUser selectUserByOpenid(String openid);
/**
* 新增微信用戶信息
*
* @param user 用戶信息
* @return 結(jié)果
*/
public int insertWxUser(SysUser user);
實(shí)現(xiàn)類：
/**
* 通過openid查詢用戶
*
* @param openid 用戶唯一標(biāo)識(shí)
* @return 用戶對(duì)象信息
*/
@Override
public SysUser selectUserByOpenid(String openid)
{
return userMapper.selectUserByOpenid(openid);
}
/**
* 新增微信用戶信息
*
* @param user 用戶信息
* @return 結(jié)果
*/
@Override
public int insertWxUser(SysUser user)
{
// 新增用戶信息
return userMapper.insertUser(user);
}
mapper 層 （SysUserMapper）文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-491201.html
/**
* 通過openid查詢用戶
*
* @param openid 用戶唯一標(biāo)識(shí)
* @return 用戶對(duì)象信息
*/
public SysUser selectUserByOpenid(String openid);
mybatis.xml （SysUserMapper.xml）文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491201.html
u.union_id, u.open_id,
....
<select id="selectUserByOpenid" parameterType="String" resultMap="SysUserResult">
<include refid="selectUserVo"/>
where u.open_id = #{openId} and u.del_flag = '0'
</select>
....
<insert id="insertUser" parameterType="SysUser" useGeneratedKeys="true" keyProperty="userId">
insert into sys_user(
<if test="userId != null and userId != 0">user_id,</if>
<if test="deptId != null and deptId != 0">dept_id,</if>
<if test="userName != null and userName != ''">user_name,</if>
<if test="nickName != null and nickName != ''">nick_name,</if>
<if test="email != null and email != ''">email,</if>
<if test="avatar != null and avatar != ''">avatar,</if>
<if test="phonenumber != null and phonenumber != ''">phonenumber,</if>
<if test="sex != null and sex != ''">sex,</if>
<if test="password != null and password != ''">password,</if>
<if test="status != null and status != ''">status,</if>
<if test="createBy != null and createBy != ''">create_by,</if>
<if test="remark != null and remark != ''">remark,</if>
<if test="openId != null and openId != ''">open_id,</if>
<if test="unionId != null and unionId != ''">union_id,</if>
create_time
)values(
<if test="userId != null and userId != ''">#{userId},</if>
<if test="deptId != null and deptId != ''">#{deptId},</if>
<if test="userName != null and userName != ''">#{userName},</if>
<if test="nickName != null and nickName != ''">#{nickName},</if>
<if test="email != null and email != ''">#{email},</if>
<if test="avatar != null and avatar != ''">#{avatar},</if>
<if test="phonenumber != null and phonenumber != ''">#{phonenumber},</if>
<if test="sex != null and sex != ''">#{sex},</if>
<if test="password != null and password != ''">#{password},</if>
<if test="status != null and status != ''">#{status},</if>
<if test="createBy != null and createBy != ''">#{createBy},</if>
<if test="remark != null and remark != ''">#{remark},</if>
<if test="openId != null and openId != ''">#{openId},</if>
<if test="unionId != null and unionId != ''">#{unionId},</if>
sysdate()
)
</insert>
到了這里，關(guān)于結(jié)合ruoyi-cloud和ruoyi-app實(shí)現(xiàn)微信小程序的授權(quán)登錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
