谷粒商城 Gitee登录 OAuth2.0

1、微博开放平台审核身份认证时间过长,改用Gitee登录作为第三方登录

2、预先准备

2-1、在 Gitee 的设置-数据管理-第三方应用中创建应用,设置应用回调地址为 http://auth.gulimall.com/oauth2/gitee/success

2-2、在 ums_member 表中增加字段

img

2-3、在 Nacos 的 gulimall-auth-server 模块的配置文件中添加相关配置

gitee:
  oauth:
    client-id: 
    client-secret: 
    redirect-uri: http://auth.gulimall.com/oauth2/gitee/success

2-4、在 gulimall-common 中创建 SocialUserTo 实体类用于远程调用

package com.atguigu.common.to;
import lombok.Data;
@Data
public class SocialUserTo {
    private String accessToken;
    private String tokenType;
    private Long expiresIn;
    private String refreshToken;
    private String scope;
    private Long createdAt;
    private String id;
    private String login; //用户用户名
    private String name; //用户昵称
    private String  avatarUrl;
    private String bio; //用户自我介绍
    private String email;
}

2-5、编写远程调用接口

@PostMapping("/member/member/oauth2/login")
R login(@RequestBody SocialUserTo to);

3、参考 Gitee OAuth 文档,修改登录页面 login.html

<li>
    <a href="https://gitee.com/oauth/authorize?client_id={client_id}&redirect_uri={redirect_uri}&response_type=code">
        <img style="width: 25px; height: 25px" src="/static/login/JD_img/gitee.png"/>
        <span>Gitee</span>
    </a>
</li>

3-1、client_id 在创建应用后自动生成,redirect_uri 为应用回调地址

3-2、图标可以直接存入 nginx 中,也可以使用官网图片 https://gitee.com/static/images/logo-black.svg

4、生成 accessToken 后,会根据应用回调地址调用 gulimall-auth-server 模块中的 gitee() 方法

@Controller
public class OAuth2Controller { 
    @Value("${gitee.oauth.client-id}")
    private String clientId;
    @Value("${gitee.oauth.client-secret}")
    private String clientSecret;
    @Value("${gitee.oauth.redirect-uri}")
    private String redirectUri;
    @Autowired
    private MemberFeignService memberFeignService;
​
    @GetMapping("/oauth2/gitee/success")
    public String gitee(@RequestParam("code") String code) throws Exception {
        Map<String, String> headers = new HashMap<>();
        Map<String, String> querys = new HashMap<>();
        querys.put("grant_type", "authorization_code");
        querys.put("code", code);
        querys.put("client_id", clientId);
        querys.put("redirect_uri", redirectUri);
        querys.put("client_secret", clientSecret);
        Map<String, String> bodys = new HashMap<>();
        HttpResponse responsePost = HttpUtils.doPost("https://gitee.com", "/oauth/token", "POST", headers, querys, bodys);
        if(responsePost.getStatusLine().getStatusCode() == 200){
            String json = EntityUtils.toString(responsePost.getEntity());
            SocialUserTo socialUserTo = JSON.parseObject(json, SocialUserTo.class);
            if(socialUserTo != null && StringUtils.hasLength(socialUserTo.getAccessToken())){
                querys.clear();
                querys.put("access_token", socialUserTo.getAccessToken());
                HttpResponse responseGet = HttpUtils.doGet("https://gitee.com", "/api/v5/user", "GET", headers, querys);
                if(responseGet.getStatusLine().getStatusCode() == 200){
                    json = EntityUtils.toString(responseGet.getEntity());
                    SocialUserTo user = JSON.parseObject(json, SocialUserTo.class);
                    BeanUtils.copyProperties(user, socialUserTo, "accessToken", "tokenType", "expiresIn", "refreshToken", "scope", "createdAt");
                    R r = memberFeignService.login(socialUserTo);
                    if(r.getCode() == 0){
                        json = JSON.toJSONString(r.get("data"));
                        MemberRespVo vo = JSON.parseObject(json, MemberRespVo.class);
                        return "redirect:http://gulimall.com";
                    }
                }
            }
        }
        return "redirect:http://auth.gulimall.com/login.html";
    }
}

4-1、@Value("${}") 中的配置名必须与配置文件中的完全一致,否则无法正常解析

4-2、HttpUtils.doPost()、HttpUtils.doGet() 中的第一个参数为 host,必须写完整地址,否则报错

img

4-3、因为向 Gitee 申请令牌时,返回的信息中并不包含用户id,参考 Gitee API 文档 获取授权用户资料

4-4、socialUserTo 中为令牌相关信息,user 中为用户相关信息,在合并两个对象时,BeanUtils.copyProperties() 携带的 String 参数为忽略的参数,避免信息被覆盖为 null

5、远程调用 gulimall-member 中的方法 

@PostMapping("/oauth2/login")
public R login(@RequestBody SocialUserTo to){
    MemberEntity member = memberService.login(to);
    if(member != null){
        return R.ok().put("data", member);
    }
    return R.error(BizCodeEnum.LOGIN_EXCEPTION.getCode(), BizCodeEnum.LOGIN_EXCEPTION.getMsg());
}
@Override
public MemberEntity login(SocialUserTo to) {
    String uid = to.getId();
    MemberEntity member = this.baseMapper.selectOne(new QueryWrapper<MemberEntity>().eq("social_uid", uid));
    if(member == null){ 
        member = new MemberEntity();
        member.setUsername(to.getLogin());
        member.setNickname(to.getName());
        member.setEmail(to.getEmail());
        member.setHeader(to.getAvatarUrl());
        member.setSign(to.getBio());
        member.setSocialUid(uid);
        MemberLevelEntity memberLevelEntity = memberLevelDao.getDefaultLevel();
        member.setLevelId(memberLevelEntity.getId());
        this.baseMapper.insert(member);
    }
    redisTemplate.opsForValue().set(MemberConstant.OAUTH_GITEE + uid, to.getAccessToken(), to.getExpiresIn(), TimeUnit.SECONDS);
    return member;
}

5-1、因为 Gitee 设置令牌过期时间为1天,因此选择将令牌放在 Redis 而非数据库中,需要提前在 Nacos 中配置 Redis 信息,否则报错

img

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue 单点登录结合 OAuth2.0 是一种常见的身份验证和授权机制。OAuth2.0 允许用户使用他们在其他应用程序中拥有的凭据来登录您的应用程序,而无需创建新的用户名和密码。 在 Vue 中实现单点登录结合 OAuth2.0 的步骤如下: 1. 注册 OAuth2.0 提供商:您需要选择一个 OAuth***获取客户端ID和客户端密钥。 2. 安装依赖:使用 npm 或 yarn 安装用于处理 OAuth2.0 的库,例如 `vue-oauth2-oidc`。 3. 配置 OAuth2.0 客户端:在 Vue 项目的配置文件中,将 OAuth2.0 客户端的配置信息(客户端ID、客户端密钥、授权终结点等)添加进去。 4. 实现登录和授权流程:在 Vue 组件中,您可以创建一个登录按钮或链接,当用户点击时触发 OAuth2.0登录流程。您可以使用 `vue-oauth2-oidc` 提供的方法来处理认证请求和获取访问令牌。 5. 处理回调:当用户成功登录并授权后,OAuth2.0 提供商将重定向用户到您的应用程序,并附带一个授权码。您需要在 Vue 组件中处理回调,验证授权码并交换访问令牌。 6. 保持登录状态:一旦您获得访问令牌,您可以将其存储在 Vue 的状态管理器(如Vuex)中,以便在应用程序的其他部分使用。您可以使用访问令牌来获取用户信息或调用受保护的 API。 通过以上步骤,您可以实现 Vue 单点登录结合 OAuth2.0。请注意,具体的实现细节可能因您选择的 OAuth2.0 提供商而有所不同,您需要查阅相关文档和示例代码来完成集成。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值