asp.net core系列 58 IS4 基於瀏覽器的JavaScript客戶端應用程式

来源:https://www.cnblogs.com/MrHSR/archive/2019/04/19/10735033.html
-Advertisement-
Play Games

一. 概述 本篇探討使用"基於瀏覽器的JavaScript客戶端應用程式"。與上篇實現功能一樣，只不過這篇使用JavaScript作為客戶端程式，而非core mvc的後臺代碼HttpClient實現。 功能一樣：用戶首先要登錄IdentityServer站點，再使用IdentityServer發出 ...


一. 概述

　　本篇探討使用"基於瀏覽器的JavaScript客戶端應用程式"。與上篇實現功能一樣，只不過這篇使用JavaScript作為客戶端程式，而非core mvc的後臺代碼HttpClient實現。 功能一樣：用戶首先要登錄IdentityServer站點，再使用IdentityServer發出的訪問令牌調用We​​b API，可以註銷IdentityServer站點下登錄的用戶，清除cookie中的令牌信息。所有這些都將來自瀏覽器中運行的JavaScript。

　　此示例還是三個項目：

　　　　IdentityServer令牌服務項目 http://localhost:5000

　　　　API資源項目 http://localhost:5001

　　　　JavaScript客戶端項目 http://localhost:5003

　　開源Github

 

二. IdentityServer項目

　　1.1 定義客戶端配置

　　　　Config.cs中，定義客戶端，使用code 授權碼模式，即先登錄獲取code,再獲取token。項目其它處代碼不變。

       public static IEnumerable<Client> GetClients()
        {
            return new List<Client>
            {
                // JavaScript Client
                new Client
                {
                    ClientId = "js",
                    ClientName = "JavaScript Client",
                    //授權碼模式
                    AllowedGrantTypes = GrantTypes.Code,
                    //基於授權代碼的令牌是否需要驗證密鑰,預設為false
                    RequirePkce = true,
                    //令牌端點請求令牌時不需要客戶端密鑰
                    RequireClientSecret = false,

                    RedirectUris =           { "http://localhost:5003/callback.html" },
                    PostLogoutRedirectUris = { "http://localhost:5003/index.html" },

                    //指定跨域請求,讓IdentityServer接受這個指定網站的認證請求。
                    AllowedCorsOrigins =     { "http://localhost:5003" },

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

　　　　

三. API項目

　　在Web API項目中配置 跨域資源共用CORS。這將允許從http:// localhost:5003 (javascript站點) 到http:// localhost:5001 (API站點) 進行Ajax調用(跨域)。項目其它處代碼不變。

       public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvcCore()
                .AddAuthorization()
                .AddJsonFormatters();

            services.AddAuthentication("Bearer")
                .AddJwtBearer("Bearer", options =>
                {
                    options.Authority = "http://localhost:5000";
                    options.RequireHttpsMetadata = false;

                    options.Audience = "api1";
                });

            //添加Cors服務
            services.AddCors(options =>
            {
                // this defines a CORS policy called "default"
                options.AddPolicy("default", policy =>
                {
                    policy.WithOrigins("http://localhost:5003")
                        .AllowAnyHeader()
                        .AllowAnyMethod();
                });
            });
        }
        public void Configure(IApplicationBuilder app)
        {
            //添加管道
            app.UseCors("default");
            app.UseAuthentication();
            app.UseMvc();
        }

　　

四. JavaScript客戶端項目

　　　　在項目中，所有代碼都在wwwroot下，沒有涉及到服務端代碼，可以完全不用core程式來調用。目錄如下所示：

　　　　其中添加了兩個html 頁(index.html, callback.html),一個app.js文件，這些屬於自定義文件。oidc-client.js是核心庫。

 

　　4.1 index頁面

　　　　用於調用登錄、註銷、和api。引用了oidc-client.js和app.js　

<body>
    <button id="login">Login</button>
    <button id="api">Call API</button>
    <button id="logout">Logout</button>

    <pre id="results"></pre>

    <script src="oidc-client.js"></script>
    <script src="app.js"></script>
</body>

 　　

 　　4.2 app.js

　　　　是應用程式的主要代碼，包括：登錄、Api請求，註銷。配置與服務端代碼差不多，如下所示：

/// <reference path="oidc-client.js" />

//消息填充
function log() {
    document.getElementById('results').innerText = '';

    Array.prototype.forEach.call(arguments, function (msg) {
        if (msg instanceof Error) {
            msg = "Error: " + msg.message;
        }
        else if (typeof msg !== 'string') {
            msg = JSON.stringify(msg, null, 2);
        }
        document.getElementById('results').innerHTML += msg + '\r\n';
    });
}

document.getElementById("login").addEventListener("click", login, false);
document.getElementById("api").addEventListener("click", api, false);
document.getElementById("logout").addEventListener("click", logout, false);

var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
//UserManager類
var mgr = new Oidc.UserManager(config);

//用戶是否登錄到JavaScript應用程式
mgr.getUser().then(function (user) {
    if (user) {
        log("User logged in", user.profile);
    }
    else {
        log("User not logged in");
    }
});

//登錄
function login() {
    mgr.signinRedirect();
}

//跨域請求api
function api() {
    mgr.getUser().then(function (user) {
        var url = "http://localhost:5001/identity";

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = function () {
            log(xhr.status, JSON.parse(xhr.responseText));
        }
        xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);
        xhr.send();
    });
}

//註銷
function logout() {
    mgr.signoutRedirect();
}

 　　4.3 callback.html

　　　　用於完成與IdentityServer的OpenID Connect協議登錄握手。對應app.js中config對象下的redirect_uri: "http://localhost:5003/callback.html"。登錄完成後，我們可以將用戶重定向回主index.html頁面。添加此代碼以完成登錄過程

<body>
    <script src="oidc-client.js"></script>
    <script>
        new Oidc.UserManager({ response_mode: "query" }).signinRedirectCallback().then(function () {
            window.location = "index.html";
        }).catch(function (e) {
            console.error(e);
        });
    </script>
</body>

 

五 測試

　　(1) 啟動IdentityServer程式http://localhost:5000

　　(2) 啟動API程式http://localhost:5001。這二個程式屬於服務端

　　(3) 啟動javascriptClient程式 http://localhost:5003

　　(4) 用戶點擊login，開始握手授權，重定向到IdentityServer站點的登錄頁

　　(5) 輸入用戶的用戶名和密碼，登錄成功。跳轉到IdentityServer站點consent同意頁面

　　(6) 點擊 yes allow後，跳回到客戶端站點http://localhost:5003/index.html，完成了互動式身份認證。

　　(7) 調用點擊Call API按鈕，獲取訪問令牌，請求受保護的api資源。調用CallAPI 時，是訪問的api站點http://localhost:5001/identity。

 

參考文獻

　　添加JavaScript客戶端

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • DSAPI 導出EXEDLL函數到字元串
    EXE或者DLL寫好了，要開始寫函數說明文檔了，可是有時裡面的函數太多，怎麼能自動列出來呢？在DSAPI中提供了該功能（目前沒有做參數類型導出，以後有時間會添加）。 先準備一個已經寫好的EXE或DLL，註意，EXE或DLL必須是.NET編寫的，EXE不能加殼，兩者均可以是經混淆處理過的。 如 調用函 ...
  • .NET Framework 4.8發佈
    原文地址：https://devblogs.microsoft.com/dotnet/announcing-the-net-framework-4-8/ 我們很高興地宣佈今天發佈.NET Framework 4.8。它包含在Windows 10 May 2019更新中。.NET Framework ...
  • Unity3D開發游戲世界天空盒
    天空盒 ， 顧名思義是 給游戲場景 添加一個 天空背景 讓游戲更加精美，更具有魅力添加天空盒 有兩種方式 1 ： 在當前相機上添加skybox2 ： 在當前場景上添加skybox上面的兩種方式的結果是一樣的 第一種方式的優勢在於 如果 世界中有多個攝像機的話，切換攝像機 需要看不同的天空 就可以使用 ...
  • linq用法整理
    linq用法整理 普通查詢 Group by 有條件Group by 嵌套Group Inner Joins Simple key join 簡單鍵值join Composite key join 多條件join Multiple join 多條件join Inner join by using g ...
  • .net 操作excel
    .net 操作excel的常用組件：EPPlus，NPOI 1.NPOI，即POI的.NET版本（POI是一套用Java寫成的庫，能夠幫助開發者在沒有安裝微軟Office的情況下讀寫Office文件，格式包括xls, doc, ppt等。） 2.EPPlus, Epplus是一個使用Open Off ...
  • net core體系-１概要
    .net core最近園子討論頻率很高的話題，從不久前發佈正式版本後，也是開始從netcore官網一步一步走向學習之路；.net跨平臺的設計讓人很是興奮起來，因為做了多年的互聯網研發者，見識了很多一流大公司對之的態度，在很多應用方面幾乎看不到影子，深深感覺發展前景不是很樂觀，但現在不同以往跨平臺，加 ...
  • dotnet core ef啟用數據遷移
    創建一個項目 通過Nuget獲取EF Core相關的擴展包 appsettings.json 建立資料庫連接串 創建資料庫上下文EntityDbContext類,用於掛好實體類映射資料庫表 使用包管理器控制台工具，輸入命令啟用數據遷移 Add-Migration InitialCreate 創建遷移 ...
  • 新品成熟EMR源碼電子病歷系統軟體NET網路版CS可用帶資料庫全文檔
    查看電子病歷系統演示 醫院醫療信息管理系統，EMR電子病歷系統，功能模塊如下所示： 1.住院醫生站 2.住院護士站 3.病案瀏覽工作站 4.質量控制工作站 5.系統維護工作站 本店出售系統全套源碼，包含介面平臺和報表平臺源碼。軟體開發語言是.net c#，開發工具vs2010，資料庫oracle11 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類