.net core 3.1 Identity Server4 (Implicit模式)

• .net core 3.1 Identity Server4 (Implicit模式)
  • Implicit 模式的理解
  • 创建客户端(AiDaSi.OcDemo.JavaScriptClient)
  • Implicit Flow
  • Oidc-Client 简介
  • 属性设置表
  • 使用OIDC-Client.js登录
  • 请求API(ApIDemo1)
  • 设置用户信息存储的地方
  • 刷新Token

Implicit 模式的理解

创建客户端(AiDaSi.OcDemo.JavaScriptClient)

修改launchSettings.json文件

{
  "profiles": {
    "AiDaSi.OcDemo.JavaScriptClient": {
      "commandName": "Project",
      "launchBrowser": true,
      "applicationUrl": "https://localhost:6001",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }
  }
}

安装依赖包Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation,用来Razor视图和Razor页面的汇编。

修改Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllersWithViews()
        .AddRazorRuntimeCompilation();
}
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseStaticFiles();
    app.UseRouting();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
    });
}

创建Controllers/HomeController.cs与wwwroot文件夹

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Implicit Flow

更多参数请参考：https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-implicit-grant-flow

我们来按照上面的请求格式进行模拟创建请求，添加客户端中Home/index.cshtml视图，内容如下。

h1>Javascript Client</h1>
<button type="button" onclick="signIn()">登录</button>
<script src="~/SignIn.js" type="text/javascript"></script>

通过上一次的Code客户端模式做一次登录模拟请求，获取得到的地址如下:

可以知道它的回调链接是/connect/authorize/callback,添加一个SignIn.js的js到wwwroot中,仿照一个链接如下：

// createState与createNonce随便填填就好了
var createState = function () {
    return "createStateasdfasdfasdfasdfasdfasd";
}
var createNonce = function () {
    return "createNoncecreateNoncecreateNoncecreateNoncecreateNonce";
}
var signIn = function () {
    // 跳回到客户端的/Home/SignIn地址
    var redirectUri = "https://localhost:6001/Home/SignIn";
    var responseType = "id_token token";
    var scope = "openid ApiOne";
    var authUrl = "/connect/authorize/callback" +
        "?client_id=js_client" +
        "&redirect_uri=" + encodeURIComponent(redirectUri) +
        "&response_type=" + encodeURIComponent(responseType) +
        "&scope=" + encodeURIComponent(scope) +
        "&nonce=" + createNonce() +
        "&state=" + createState();
    var returnUrl = encodeURIComponent(authUrl);
    console.log(authUrl);
    console.log(returnUrl);
// 我们在拼接好后访问
    window.location.href = "https://localhost:7200/IdentityCodeAuth/Login?ReturnUrl=" + returnUrl;
}

接着我们访问试试..

接着我们在授权服务器上添加Implicit授权客户端

new Client
{
    ClientId = "js_client",
    // Implicit
    AllowedGrantTypes = GrantTypes.Implicit,
    //登录成功后，跳转的地址
    RedirectUris = { "https://localhost:6001/Home/SignIn" },
    AllowedScopes =
    {
        "ApiOne",
        IdentityServerConstants.StandardScopes.OpenId,
    },
    //允许浏览器访问令牌
    AllowAccessTokensViaBrowser = true,
    //作用范围
    RequireConsent = false
}

好的我们登录来试试，我们发现我们并没有添加图中所对应的页面，单里面返回了许多值这些值当中就有我们需要的Access Token。

在客户端中添加SignIn方法，并创建对应的视图。访问成功后完成D步骤。

public IActionResult SignIn()
{
    return View();
}

<h1>登录成功</h1>

为返回的页面添加按钮，创建sign-in-callback.js文件来解码其中的值并添加到LocalStorage中去。

<h1>登录成功</h1>
<button onclick="extractTokens(window.location.href)">Extract Tokens</button>
<script src="~/sign-in-callback.js"></script>

var extractTokens = function (callbackUrl) {
    var returnValue = callbackUrl.split('#')[1];
    var values = returnValue.split('&');
    for (var i = 0; i < values.length; i++) {
        var v = values[i];
        var kvPair = v.split('=');
        //将获取到的信息初入LocalStorage里面
        localStorage.setItem(kvPair[0], kvPair[1]);
    }
}

此时我们获取到了我们所需要的一切

修改sign-in-callback.js,然后我们可以将跳回到首页中去

var extractTokens = function (callbackUrl) {
    var returnValue = callbackUrl.split('#')[1];
    var values = returnValue.split('&');
    for (var i = 0; i < values.length; i++) {
        var v = values[i];
        var kvPair = v.split('=');
        //将获取到的信息初入LocalStorage里面
        localStorage.setItem(kvPair[0], kvPair[1]);
    }
    //再返回到首页中去
    window.location.href = '/home/index';
}
var _callbackUrl = window.location.href;
extractTokens(_callbackUrl)

Oidc-Client 简介

属性设置表

使用OIDC-Client.js登录

var config = {
    authority: "https://localhost:7200/", // OIDC/OAuth2提供程序的URL。
    client_id: "js_client", // 在 OIDC/OAuth2 提供程序中注册的客户端应用程序的标识符。
    response_type: "id_token token", // 默认值'id_token' OIDC/OAuth2 提供程序所需的响应类型。 Type为Implicit时
    redirect_uri: "https://localhost:6001/Home/SignIn", // 您的客户端应用程序的重定向URI，以接收来自 OIDC/OAuth2 提供程序的响应。
    scope: 'ApiOne openid', // 从 OIDC/OAuth2 提供程序请求的范围。
}
var userManger = new Oidc.UserManager(config);
var signIn = function () {
    userManger.signinRedirect();
}

<h1>Javascript Client</h1>
<button type="button" onclick="signIn()">登录</button>
<script src="https://cdn.bootcdn.net/ajax/libs/oidc-client/1.9.1/oidc-client.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script src="~/main.js"></script>

//跨域请求白名单
AllowedCorsOrigins = { "https://localhost:6001" },

<h1>登录成功</h1>
<script src="https://cdn.bootcdn.net/ajax/libs/oidc-client/1.9.1/oidc-client.min.js"></script>
<script>
    var userManager = new Oidc.UserManager();
    userManager.signinCallback().then(res => {
        console.log('处理已经完成，正在执行回调函数:', res);
        window.location.href = '/home/index';
    });
</script>

请求API(ApIDemo1)

//添加跨域服务政策
services.AddCors(config => {
    config.AddPolicy("AllowAll",
        p => p.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
       );
});

//使用跨域的中间件
app.UseCors("AllowAll");

// 判断用户是否登录
userManger.getUser().then(user => {
    console.log("user:", user);
    if (user) {
        // 将token加入到axios请求对象中
        axios.defaults.headers.common["Authorization"] = "Bearer " + user.access_token;
    }
});
// 请求API接口
var callApi = function () {
    axios.get("http://localhost:5280/WeatherForecast")
        .then(res => {
            console.log(res);
        });
}

<div>
    <button type="button" onclick="callApi()">请求APIOne接口</button>
</div>

设置用户信息存储的地方

userStore: new Oidc.WebStorageStateStore({ store: window.localStorage })

刷新Token

new Client
{
    ClientId = "js_client",
    // Implicit
    AllowedGrantTypes = GrantTypes.Implicit,
    //登录成功后，跳转的地址
    RedirectUris = { "https://localhost:6001/Home/SignIn" },
    //退出时跳转的地址
    PostLogoutRedirectUris = { "https://localhost:6001/Home/Index" },
    //跨域请求白名单
    AllowedCorsOrigins = { "https://localhost:6001" },
    AllowedScopes =
    {
        "ApiOne",
        IdentityServerConstants.StandardScopes.OpenId,
    },
    //访问令牌的生命周期为30秒钟
    AccessTokenLifetime = 30,
    //允许浏览器访问令牌
    AllowAccessTokensViaBrowser = true,
    //作用范围
    RequireConsent = false
}

post_logout_redirect_uri: "https://localhost:6001/Home/Index",

var refreshing = false;
//输出拦截器
axios.interceptors.response.use(
    function (response) {
        return response;
    },
    //当报错时刷新令牌
    function (error) {
        console.log(" axios error: ", error.response);
        let axiosConfig = error.response.config;
        // 如果状态码是401我们将会刷新令牌
        if (error.response.status === 401) {
            console.log(" axios error 401");
            // 如果已经刷新，请不要再提出其他需求
            if (!refreshing) {
                console.log("开始刷新");
                refreshing = true;
                // 刷新令牌方法
                return userManger.signinSilent().then(res => {
                    console.log(res);
                    // 更新请求Token与本地客户端的Token
                    axios.defaults.headers.common['Authorization'] = "Bearer " + res.access_token;
                    axiosConfig.headers['Authorization'] = "Bearer " + res.access_token;
                    refreshing = false;
                    // 并重试一下axios的请求
                    return axios(axiosConfig);
                });
            }
        }
        // 带一个有拒绝原因的方法
        return Promise.reject(error);
    });