网站集成微软账户一键登录(支持Windows Hello 面容、指纹等)-微软Azure的Oatuh2.0的集成

简介

在个人网站中集成微软 OAuth 2.0 登录，可以显著降低用户的使用门槛。用户无需再单独注册账号或记忆新的密码，只需使用已有的 Microsoft 账户即可快速完成登录。借助 Windows Hello，用户可以直接通过人脸识别或指纹验证完成身份认证，在保证安全性的同时，获得更流畅、自然的登录体验。如今越来越多的网站选择集成，特别是pc网站。在个人手机网站上集成Apple ID登录的比较多。  

 

本文将介绍怎么创建Oauth 2.0 账户，来让网站集成微软登录，包括azure的应用配置和对应关系，后端代码将使用 spring oauth2 client （spring boot 3.5.X版本），不包含oauth 2.0协议的讲解。 

触发微软登录的效果，可以用电脑的指纹或者面容、PIN码登录在支持Windows Hello的设备上面。

 

如今越来越多的网址，集成微软登录 或者苹果登录，方便用户快速注册登录： 

 

 

注册Oauth 2.0 应用方法

 

1、注册Azure的账户。主页 - Microsoft Azure

 

2、完成注册了进行Azure首页，搜索：应用注册。

 

 

 

 

 3、点击新注册。

 4、填写应用基本信息和后端的回调地址

 

 5、填写之后下一步，然后打开刚刚注册的应用，关注下面几个选项：

 

应用程序(客户端) ID：相当于client-id

目录(租户) ID：issuer-uri会用到拼接之后才是你完整的地址，issuer-uri=https://login.microsoftonline.com/a98***********************/v2.0   

客户端凭据： 相当于client-secret，获取这些信息后，填写到spring boot yml 配置文件中：

 

根据协议，可以访问 https://login.microsoftonline.com/a98**********************/v2.0/.well-known/openid-configuration 端点，来获取Oauth 2.0的端点信息，比如授权接口、获取accessToken的接口。

由于我使用了spring oauth2 client 框架会自动读取这些端点信息，帮我完成oauth2的流程，从而获取用户信息。打印这些端点，便于一些不使用框架的情况下，方便他们手动请求接口。

{"token_endpoint": "https://login.microsoftonline.com/a98*************************************/oauth2/v2.0/token","token_endpoint_auth_methods_supported": ["client_secret_post","private_key_jwt","client_secret_basic","self_signed_tls_client_auth"],"jwks_uri": "https://login.microsoftonline.com/a98*************************************/discovery/v2.0/keys","response_modes_supported": ["query","fragment","form_post"],"subject_types_supported": ["pairwise"],"id_token_signing_alg_values_supported": ["RS256"],"response_types_supported": ["code","id_token","code id_token","id_token token"],"scopes_supported": ["openid","profile","email","offline_access"],"issuer": "https://login.microsoftonline.com/a98*************************************/v2.0","request_uri_parameter_supported": false,"userinfo_endpoint": "https://graph.microsoft.com/oidc/userinfo","authorization_endpoint": "https://login.microsoftonline.com/a98*************************************/oauth2/v2.0/authorize","device_authorization_endpoint": "https://login.microsoftonline.com/a98*************************************/oauth2/v2.0/devicecode","http_logout_supported": true,"frontchannel_logout_supported": true,"end_session_endpoint": "https://login.microsoftonline.com/a98*************************************/oauth2/v2.0/logout","claims_supported": ["sub","iss","cloud_instance_name","cloud_instance_host_name","cloud_graph_host_name","msgraph_host","aud","exp","iat","auth_time","acr","nonce","preferred_username","name","tid","ver","at_hash","c_hash","email"],"kerberos_endpoint": "https://login.microsoftonline.com/a98*************************************/kerberos","mtls_endpoint_aliases": {"token_endpoint": "https://mtlsauth.microsoft.com/a98*************************************/oauth2/v2.0/token"},"tls_client_certificate_bound_access_tokens": true,"tenant_region_scope": "AS","cloud_instance_name": "microsoftonline.com","cloud_graph_host_name": "graph.windows.net","msgraph_host": "graph.microsoft.com","rbac_url": "https://pas.windows.net"
}

 

后端spring security oauth 2.0 应用配置：

根据上面的应用注册的信息，我们配置spring boot 后端项目的配置：

spring:security:oauth2:client:registration:microsoft:provider: microsoft               client-id: 328******************************************client-secret: V*****************************************redirect-uri: "https://xxx域名/api/login/oauth2/code/{registrationId}"scope: openid,email,profile   # 申请的权限（根据需要填写）provider:microsoft:issuer-uri: https://login.microsoftonline.com/a98********************/v2.0

@Slf4j
@Controller
public class DefaultController {@GetMapping("/authorized")//此次我配置了 oauth2Login成功后跳转到的successHandler，此次可以写入cookie等 重定向的方式来通知前端。
public String authorized(Authentication authentication, HttpServletResponse response) {//断点在 Authetication 中已经可以获取，到微软账户登录成功的信息了，包括用户名、邮箱等，可以根据业务需要注册账户 或者使用TokenRelay filter处理accessToken令牌
        oauth2LoginService.handleOAuth2LoginSuccess(authentication, response);log.info("重定向到前端: {} (domain={}, secure={})",this.appBaseUri, cookieDomain, cookieSecure);return "redirect:" + this.appBaseUri;}

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-oauth2-client</artifactId></dependency>

 

登录流程：

1. 前端放按钮，用户点击按钮跳转下面链接（这个地址并不是 redirect-uri，这是框架定义的 ）：

   api/oauth2/authorization/microsoft

 

2. 重定向到：

   https://login.microsoftonline.com/.../authorize

 

3. 用户完成人脸 / 指纹（Windows Hello）

 

4. Microsoft 回调(这个对应redirect-uri)：

   /login/oauth2/code/microsoft?code=xxx

 

5. Spring Security 完成认证 、也获取到了用户的信息、引导用户注册或者使用TokenRelay 转发给后面api资源服务器、通知前端登录成功。

 

项目参考

我的项目用到了spring官方的代码参考，你可以下载官方的参考代码来当初始化模板改写：

spring-authorization-server/samples at main · spring-projects/spring-authorization-server · GitHub