orchard core 开启openid 使用uniapp结合oidc-client 作为客户端连接

标签：core oidcClient orchard openid user https console true oidc

官方的项目地址：
https://github.com/onestar1/OrchardSkills.OrchardCore.OIDC.Vue.js/tree/main/OrchardSkills.OrchardCore.MaterialDesignTheme

操作步骤：
单独 clone
https://github.com/OrchardSkills/OrchardSkills.OrchardCore.MaterialDesignTheme
1、打开 Recipes 目录下面的 materialdesign.recipe.json
"OrchardCore.OpenId.Server",
"OrchardCore.OpenId.Management",
"OrchardCore.OpenId.Validation",
打开 openid的配置
同时在尾部增加配置：
{
"name": "OpenIdServerSettings",
"TestingModeEnabled": false,
"AccessTokenFormat": "JsonWebToken",
"Authority": "https://localhost:44342",
"EnableTokenEndpoint": true,
"EnableAuthorizationEndpoint": true,
"EnableLogoutEndpoint": true,
"EnableUserInfoEndpoint": true,
"AllowPasswordFlow": true,
"AllowClientCredentialsFlow": true,
"AllowAuthorizationCodeFlow": true,
"AllowRefreshTokenFlow": true,
"AllowImplicitFlow": false,
"AllowLogoutEndpoint": true,
"AuthorizationEndpointPath": "https://localhost:44342/connect/authorize",
"LogoutEndpointPath": "https://localhost:44342/connect/logout",
"TokenEndpointPath": "https://localhost:44342/connect/token",
"UserinfoEndpointPath": "https://localhost:44342/connect/userinfo"
},
{
"DisplayName": "Authorization Code Flow",
"name": "OpenIdApplication",
"ClientId": "code_flow_client_id",
"RedirectUris": "https://localhost:5002/signin-callback",
"PostLogoutRedirectUris": "https://localhost:5002/signout-callback",
"AllowAuthorizationCodeFlow": true,
"AllowLogoutEndpoint": true,
"Type": "public"
},
{
"name": "OpenIdScope",
"Description": "A scope to provide api for remote clients",
"DisplayName": "api Scope",
"ScopeName": "api",
"Resources": "my_recipient"
},
{
"name": "OpenIdValidationSettings",
"Audience": "my_recipient",
"Authority": "https://localhost:44342"
}

也可以在程序运行的时候使用后台ui进行添加配置
2、开始安装对应的 view 跟vue
cmd到根目录
npm install -g @vue/cli

vue create vuex-oidc

cd vuex-oidc

npm install axios --save

//安装字体
npm install @fortawesome

接下去就是使用uniapp oidc-client 对接

新建一个uniapp 的默认项目，然后安装 oidc-client
安装 axios

也可以直接从刚才安装的目录下面拷贝这两个node_modules

main.js 添加
主要是导入 oidc 设置为全局调用的属性。
vue3的写法是：
`import Vue from 'vue'
import App from './App'
import Oidc from '@/services/authService.js'

Vue.config.productionTip = false

App.mpType = 'app'
//vue2
Vue.prototype.$oidc = new Oidc()
//vue3
//Vue.config.globalProperties.$oidc = new Oidc()
const app = new Vue({
...App
})
app.$mount()
添加oidc的配置文件 config.js
export const clientRoot = 'http://localhost:8081/'
export const stsAuthority = 'https://localhost:7278/'
export const clientId = 'code_flow_client_id'
export const scope = 'myapp'
export const responseType = 'code'
然后整合oidc的登录跟注销方法 authService.js/* eslint-disable */
import Oidc from 'oidc-client';
// import 'babel-polyfill';
import {
clientRoot,
stsAuthority,
clientId,
scope,
responseType
} from '../config/config'

var oidcClient = new Oidc.UserManager({
userStore: new Oidc.WebStorageStateStore(),
authority: stsAuthority,
client_id: clientId,
redirect_uri: clientRoot + 'pages/SignInCallBack',
response_type: responseType,
scope: scope,
post_logout_redirect_uri: clientRoot + 'pages/SignOutCallBack',
filterProtocolClaims: true,
loadUserInfo: true
})

Oidc.Log.logger = console;
Oidc.Log.level = Oidc.Log.INFO;

oidcClient.events.addUserLoaded(function (user) {
console.log('New User Loaded：', arguments);
console.log('Acess_token: ', user.access_token)
});

oidcClient.events.addAccessTokenExpiring(function () {
console.log('AccessToken Expiring：', arguments);
});

oidcClient.events.addAccessTokenExpired(function () {
console.log('AccessToken Expired：', arguments);
//alert('Session expired. Going out!');
oidcClient.signoutRedirect().then(function (resp) {
console.log('signed out', resp);
}).catch(function (err) {
console.log(err)
})
});

oidcClient.events.addSilentRenewError(function () {
console.error('Silent Renew Error：', arguments);
});

oidcClient.events.addUserSignedOut(function () {
//alert('Going out!');
console.log('UserSignedOut：', arguments);
oidcClient.signoutRedirect().then(function (resp) {
console.log('signed out', resp);
}).catch(function (err) {
console.log(err)
})
});

export default class SecurityService {

login() {
    return oidcClient.signinRedirect(); // Returns promise to trigger a redirect of the current window to the authorization endpoint.
  }

  async isLoggedIn() {
    const user = await oidcClient.getUser();
    const userCurrent = !!user && !user.expired;

    return userCurrent;
  }

  async completeLogin() {
    const user = await oidcClient.signinRedirectCallback() // Returns promise to process response from the authorization endpoint. The result of the promise is the authenticated User
      ;
   
    return user;
  }

  logout() {
    oidcClient.signoutRedirect(); // Returns promise to trigger a redirect of the current window to the end session endpoint.
  }

  completeLogout() {

   
    return oidcClient.signoutRedirectCallback(); // Returns promise to process response from the end session endpoint.
  }

  async getAccessToken() {
    const user = await oidcClient.getUser(); // Returns promise to load the User object for the currently authenticated user.
    return !!user && !user.expired ? user.access_token : null
  }

}

最后vue页面内容
分别是一个主页面、设置两个组件登录跟注销跳转，一个展示页面
oidc-demo.vue
` `

SignInCallBack.vue
`

SignOutCallBack.vue

home.vue
`