歡迎光臨
每天分享高質量文章

IdentityServer4-前後端分離之Vue

 前言

之前文章講到如何使用Node.js+Express構建JavaScript客戶端,實現前後端分離。本節將介紹如何使用Vue實現前後端分離,文中介紹Vue的知識比較基礎,適合新手學習。


一、搭建Vue專案

前提條件:安裝nodejs、webpack和vue-cli。這個網上很多教程,這裡不多說。

(1)新建Vue專案

Cmd進入創建專案的路徑,輸入:vue init webpack VueJS_Client

新建vuejs_client的Vue專案,安裝npm。

(2)安裝oidc-client庫

使用VSCode打開vuejs_client專案所在的檔案夾

Ctrl + ~ 打開控制控制台,輸入:npm install oidc-client

(3)實現自動跳轉登錄頁面

在src檔案夾中打開HelloWorld.vue檔案,匯入oidc-client模塊,若在未登錄情況,在組件創建前跳轉登錄頁面。代碼很簡單,直接呼叫登錄函式。

(4)指定重定向頁面

可以看到上面的配置,一旦用戶登錄到IdentityServer,CallBack就是指定的redirect_uri頁面。

在components檔案夾中新建CallBack.vue檔案,呼叫UserManager函式,實現頁面跳轉。

  
  

(5)編寫Home組件

在CallBack中,重定向了Home組件,此時可以獲取到登錄用戶的屬性和呼叫接口所需的access_token等。



{{res}}

 

 



(6)最後,在Router中添加新建的路由並修改程式啟動端口為5003


二、修改授權服務配置,資源服務器允許跨域呼叫API

(1)修改授權服務配置

在AuthServer專案,打開Config.cs檔案,在GetClients中添加JavaScript客戶端配置

// JavaScript Client
                new Client
                {
                    ClientId = "js",
                    ClientName = "JavaScript Client",
                    AllowedGrantTypes = GrantTypes.Implicit,
                    AllowAccessTokensViaBrowser = true,

                    RedirectUris = { "http://localhost:5003/CallBack" },
                    PostLogoutRedirectUris = { "http://localhost:5003 " },
                    AllowedCorsOrigins = { "http://localhost:5003" },

                    AllowedScopes =
                    {
                        IdentityServerConstants.StandardScopes.OpenId,
                        IdentityServerConstants.StandardScopes.Profile,
                        "api1"
                    },
                }

(2)在資源服務配置允許跨域呼叫api

在ResourceAPI專案,打開Startup.cs檔案中的ConfigureServices方法,配置CORS,允許Ajax呼叫從http://localhost:5003呼叫http://localhost:5001的Web API。

//JS-allow Ajax calls to be made from http://localhost:5003 to http://localhost:5001.
            services.AddCors(options =>
            {
                //this defines a CORS policy called "default"
                options.AddPolicy("default", policy =>
                {
                    policy.WithOrigins("http://localhost:5003")
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });

在Configure方法中將CORS中間件添加到管道中

  //JS-Add the CORS middleware to the pipeline in Configure:
            app.UseCors("default");

(3)添加測試用的api接口

添加IdentityController控制器

[Route("[controller]")]
    public class IdentityController : ControllerBase
    {
        [Authorize(Roles ="admin")]
        [HttpGet]
        public IActionResult Get()
        {
            return new JsonResult(from c in User.Claims select new { c.Type, c.Value });
        }
}

(4)測試

運行AuthServer專案,運行ResourceAPI專案。

在VSCode終端輸入:npm run dev

打開瀏覽器:http://localhost:5003/  自動跳轉到登錄頁面

賬號:zhubingjian 密碼:123  登錄。跳轉到Home頁面並獲取到用戶的屬性信息。

 

呼叫API,滿足授權條件,成功獲取資料。


總結:

本節代碼儘量簡單化了,並有加太多東西進去。關於IdentityServer4的相關知識和教程,可以看我前面幾篇博客,都有詳細的教程。

授權服務和資源服務原始碼地址: https://github.com/Bingjian-Zhu/Mvc-HybridFlow.git

Vue Demo原始碼地址:https://github.com/Bingjian-Zhu/Identity_Vue_Client

原文地址:https://www.cnblogs.com/FireworksEasyCool/p/10576911.html

赞(0)

分享創造快樂