轻松接入Azure AD+Oauth2 实现 SSO

古城微笑少年丶 2023-09-29 15:15 13阅读 0赞

### 背景介绍 ###

众所周知，目前SSO最常见的实现方案有如下几种：  
1、OAuth2  
2、SAML  
3、OpenId

本文重点介绍的是目前SSO普及偏高的是第一种方案Oauth2,以下将分几个部分阐述如何对接Azure的Oauth2

### Oauth3 集成Azure AD 方案： ###

如下是集成的时序图：  
![在这里插入图片描述][c46718465c334a88930b61e1d9b00e26.png]  
**解释说明：**  
1、Native App 可以简单的理解你要接入的WEB 网站，由它来接收azure 认证之后的跳转。  
2、Web API 可以理解为接入WEB网站对应的后端服务接口，由它来负责接收access\_token 并通过此令牌来获取当前授权用户的信息

### 具体实施步骤 ###

#### 注册AD 应用 ####

1、注册应用，如下图所示：  
![在这里插入图片描述][a52dadbc8cde4c789c509861fdf97ee4.png]

![在这里插入图片描述][1a1d06ed8bf14b5098a8cea29b89124f.png]  
2、在Client credentials中增加AD 应用对应的客户端密钥，用于Oauth2接入时的验证凭证，如下图所示：  
![在这里插入图片描述][c65e9061cf2449a0845432aee4ea118f.png]

3、在RedirecrURLs 中增加跳转的路由用于接收授权成功后的授权信息，如下图所示：  
![在这里插入图片描述][0c26c5d510814f199d33f41a072668ee.png]  
**注意：  
1、此处添加的回调地址必须为https的地址**

4、开放暴露的外部访问资源，比如可以访问用户信息的接口，如下图所示：  
![在这里插入图片描述][3a9e6580aa13445c85d03ff269b139e2.png]

#### 接入方案 ####

大家应该都晓得Oauth2目前常用的接入方式由如下几种：  
1、客户端认证模式  
2、授权码模式  
3、密码认证模式  
4、隐藏式  
由于需要获取用户的信息并且需要调用后端接口去做业务系统的权限认证，所以综合考虑选用Oauth2的授权模式接入

#### 接入实施步骤 ####

**Step1: Web 网站加载跳转如下地址**  
请求方式：GET  
请求地址：https://login.microsoftonline.com/\{tenant\_id\}/oauth2/v2.0/authorize?response\_type=code&  
client\_id=\{client\_id\}&  
redirect\_uri=https://xxx-dev.xxx.net/home&  
scope=user.read

**Step2:WEB网站 :https://xxx-dev.xxx.net/home加載,请求求后端接**口：/api/auth/oauth2/token?code=xxxxx  
接口内部调用如下：  
POST  
https://login.microsoftonline.com/\{tenant\_id\}/oauth2/v2.0/token?client\_id=\{client\_id\}&  
client\_secret=\{client\_secret\}&  
grant\_type=authorization\_code&  
code=0.AQwAbnb6gUmjZ0iL9Ks14lCgjzVmCEVErNxDj7XJCHhwDKYMAMs.AQABAAIAAAD–DLA3VO7QrddgJg7WevrbubOQoA0envxQCNoNHJAuOX4fk9xb2S5NQj\_FZlJ6sBIb7020GdRj1flmztLFee8PAXDGXr8jTaDJhFHBH9o1B5TeESFB03F1s2yPKJv5johZzgIJpGg4nG6iB3tclVH3bjY5cWNhFWx9w\_6ok4crj6GJMG7m3ujAewNkABJK2fNsunaI-J91tOIxsrJ5JE8Z\_4KCMMF8YW1t-mdW\_NAXhntsDqYq2Hm2sgVfPzPGpOK6aiC2GKxIYfOJuVaLzT5jDmSgD61DOiBlTVeE\_EIfAWD7UwavrzbFtNXw9bQLbei-lyiMrgHmgDwmXLB7LURL3alaTkBrpnRZ-bfnR8YXWpb0b9LW7wZPu0BESM2l\_IXyyg9lZZSYyzvd\_bSKRsgbmfn-Js3T\_8WduqDgT-47iApmB2qJuobhtPQ60989731vmBfYJmnGyCt573I7SpW-73idfJ\_3NT\_0dIqaXFpOjYTIrU4ynv7FvZXCpYHA2c2gXqbrBXD04tg9SudiB49CDFUPufG51L39GY9qjNuJUE9eqh4pH9SXAS1rKN4svsrj2RTUp5HN-uDt\_ucZgzYMis9ry9NhOo8aOdrv7wn6Gf1cRZg0LY5w00hx2mP2IpfORy-1y6LEU2HsqgtIJh5aeWEbk6ZrfE-WSF0m8pY9KqQTZGwCwaA8mdV76BC7TIODRhqmxNJ2nh3ZZHzgrWjDatEbXv\_aD1Z-q6v4HYLzw5Ur6Q8xTHai63IUdhUwJWT7BGfKAiBMu6zU\_9i\_f4jcjco2jGCJ0OG6cX41P-h6eHqM9DQp-kfhSbOk-fmfjMfiV4EtKQxNl1WHZFkVbLY\_0fXcsPJmsTvX7i5MFgC\_CAA&  
redirect\_uri=https://xxx-dev.xxx.net/home

返回报文：  
\{  
“access\_token”: “eyJ0eXAiOiJKV1QiLCJub25jZSI6IlctNEQ4em9mN05Yemo4MkRpallwajZlYnktZGMyUDhlRFVVU1BaTkZVZEEiLCJhbGciOiJSUzI1NiIsIng1dCI6ImpTMVhvMU9XRGpfNTJ2YndHTmd2UU8yVnpNYyIsImtpZCI6ImpTMVhvMU9XRGpfNTJ2YndHTmd2UU8yVnpNYyJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTAwMDAtYzAwMC0wMDAwMDAwMDAwMDAiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC84MWZhNzY2ZS1hMzQ5LTQ4NjctOGJmNC1hYjM1ZTI1MGEwOGYvIiwiaWF0IjoxNjUwMzcyMjQ4LCJuYmYiOjE2NTAzNzIyNDgsImV4cCI6MTY1MDM3NjMxNCwiYWNjdCI6MCwiYWNyIjoiMSIsImFjcnMiOlsidXJuOnVzZXI6cmVnaXN0ZXJzZWN1cml0eWluZm8iXSwiYWlvIjoiQVVRQXUvOFRBQUFBUXVlemdyUjc5N2E5dStuUEYrTVI1MlpMdGFWN2FsSGpDRXdwTGJaU0FTK1dlWmFCZStYZ3JHZ2gzbEIrWXRrdTIzRU9iRDRmZWgyWjlaeVdXMkZzbUE9PSIsImFtciI6WyJwd2QiLCJyc2EiLCJtZmEiXSwiYXBwX2Rpc3BsYXluYW1lIjoiRGF0YXBvcnRhbCBEZXYiLCJhcHBpZCI6IjQ1MDg2NjM1LWFjNDQtNDNkYy04ZmI1LWM5MDg3ODcwMGNhNiIsImFwcGlkYWNyIjoiMSIsImRldmljZWlkIjoiNTM1Zjk2NGUtMTZiYS00MzYzLTgyNTgtZTY1MWEzNWRkODcyIiwiZmFtaWx5X25hbWUiOiJKaWEiLCJnaXZlbl9uYW1lIjoiUGVuZ2NoZW5nIiwiaWR0eXAiOiJ1c2VyIiwiaXBhZGRyIjoiMTAxLjIyOC4yMjUuNzciLCJuYW1lIjoiSmlhLCBQZW5nY2hlbmciLCJvaWQiOiJiZjY1NWY4Mi0zYjdmLTRiNzItYWI4ZS05MDQ1NWEzY2Q2ODEiLCJvbnByZW1fc2lkIjoiUy0xLTUtMjEtMTIyOTI1NzIwMC0yMDYwNDY5MDk4LTY0MDQwMjkyMy03MzUyOTIiLCJwbGF0ZiI6IjMiLCJwdWlkIjoiMTAwMzIwMDFEMkQ5MkQzQiIsInJoIjoiMC5BUXdBYm5iNmdVbWpaMGlMOUtzMTRsQ2dqd01BQUFBQUFBQUF3QUFBQUFBQUFBQU1BTXMuIiwic2NwIjoiVXNlci5SZWFkIHByb2ZpbGUgb3BlbmlkIGVtYWlsIiwic2lnbmluX3N0YXRlIjpbImR2Y19tbmdkIiwiZHZjX2RtamQiLCJrbXNpIl0sInN1YiI6IjlGNEhRanlmNnBjazRzRW80bHJGOERpSEZST0lJSEZWRmN3aVV0RVM0WTgiLCJ0ZW5hbnRfcmVnaW9uX3Njb3BlIjoiRVUiLCJ0aWQiOiI4MWZhNzY2ZS1hMzQ5LTQ4NjctOGJmNC1hYjM1ZTI1MGEwOGYiLCJ1bmlxdWVfbmFtZSI6IlBKSUFAdm9sdm9jYXJzLmNvbSIsInVwbiI6IlBKSUFAdm9sdm9jYXJzLmNvbSIsInV0aSI6IklSTTZFbk1pUUV1UUF6eFI4Q3NLQUEiLCJ2ZXIiOiIxLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfc3QiOnsic3ViIjoibG8tcnhqSzZLank1SzlMc1hnM3I3bHA3NFhjbWdSS21vaWJKSjBCYzAwQSJ9LCJ4bXNfdGNkdCI6MTQwMDUxNDc2NH0.T9vRn-L-qBvJrqUx5Edua-VTQaokQLtSvBKPphCFe9xCivLOTTKedzWnzeZ0B4YHgT3HaHlQPScQ0Y\_ltqrUK3KSjmVj8jmJwprsTa5fhOyQQ2KIB6YOkYY7LxYP0qmZVHG\_k8SacE5EGIX0LC6hYDXEVV8ezrazvkLsfRxMR5QiWw-jFw9aWPpVA-IQ8VksRXEKq4voas1odAGDU6VZD6pGywZ2bI5VsmCl3NQy0HX3PLtlO7v8aI0Ave-wHSzBXg6-6d0f1SQ\_hdnbd94v6RyUptbolI4JgZuc8QAPgcP6KhDgCvfAJcHK0pJA4-1xou6czwNjFm4ALex1c-BNSw”,  
“expires\_in”: 3765,  
“scope”: “User.Read profile openid email”,  
“token\_type”: “Bearer”  
\}

**Step3:前端拿到Step2的令牌access\_token后需要缓存到cookiee，然后再请求后端接口：/api/auth/oauth2/login/user获取用户信息**  
header:Authorization  
接口内部调用如下：  
请求方式：GET  
请求地址：https://graph.microsoft.com/v1.0/me

返回报文：  
\{  
“businessPhones”: \[  
“+8613795919672”  
\],  
“displayName”: “Zhang, Sanwu”,  
“givenName”: “Sanwu”,  
“id”: “bf655f82-3b7f-4b55-ab8e-93452a3cd621”,  
“mail”: “sanwu.zhang@xxx.com”,  
“officeLocation”: “VCHNSR”,  
“surname”: “Zhang”,  
“userPrincipalName”: “SZhang@xxxx.com”  
\}

**Step4: 根据Step3拿到的用户信息跳转到首页界面**

**Step5: WEB网站退出如下请求如下路由进行退出**  
请求方式：GET  
请求地址： https://login.microsoftonline.com/common/oauth2/logout?  
post\_logout\_redirect\_uri=https://xxx-dev.xxx.net/login

[c46718465c334a88930b61e1d9b00e26.png]: https://img-blog.csdnimg.cn/c46718465c334a88930b61e1d9b00e26.png
[a52dadbc8cde4c789c509861fdf97ee4.png]: https://img-blog.csdnimg.cn/a52dadbc8cde4c789c509861fdf97ee4.png
[1a1d06ed8bf14b5098a8cea29b89124f.png]: https://img-blog.csdnimg.cn/1a1d06ed8bf14b5098a8cea29b89124f.png
[c65e9061cf2449a0845432aee4ea118f.png]: https://img-blog.csdnimg.cn/c65e9061cf2449a0845432aee4ea118f.png
[0c26c5d510814f199d33f41a072668ee.png]: https://img-blog.csdnimg.cn/0c26c5d510814f199d33f41a072668ee.png
[3a9e6580aa13445c85d03ff269b139e2.png]: https://img-blog.csdnimg.cn/3a9e6580aa13445c85d03ff269b139e2.png