如何在 Vue Okta 应用程序中设置 Okta 登录小部件

Question

我正在尝试将 okta 登录小部件集成到 Vue 3 项目中，基于以下内容：（Okta 登录小部件和 Vue | Okta Developer）。但是，即使在通过 yarn add @okta/okta-signin-widget 安装后，OktaSignIn 似乎也无法导入到配置文件中。换句话说，我无法将 import OktaSignIn from '@okta/okta-signin-widget' 添加到 main.ts，因为该包似乎不可用。此小部件尚不可用于 Vue 3 或 Vue CLI 4 吗？

示例：

import OktaSignIn from '@okta/okta-signin-widget'
import { OktaAuth } from '@okta/okta-auth-js'

const oktaSignIn = new OktaSignIn({
  baseUrl: 'https://${yourOktaDomain}',
  clientId: '${clientId}',
  redirectUri: 'http://localhost:8080/login/callback',
  authParams: {
    pkce: true,
    issuer: 'https://${yourOktaDomain}/oauth2/default',
    display: 'page',
    scopes: ['openid', 'profile', 'email']
  }
});

const oktaAuth = new OktaAuth({
  issuer: 'https://${yourOktaDomain}/oauth2/default',
  clientId: '${clientId}',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'profile', 'email']
})

export { oktaAuth, oktaSignIn };

Answer 1

通过“包似乎不可用”，我假设你指的是这个 TypeScript 错误：

Could not find a declaration file for module '@okta/okta-signin-widget'. '/projectRoot/node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js' implicitly has an 'any' type.

Try npm i --save-dev @types/okta__okta-signin-widget if it exists or add a new declaration (.d.ts) file containing declare module '@okta/okta-signin-widget';

该模块还不支持自己的类型，但是 there's an open PR for it. As a workaround, you can declare the typings in your project at src/okta-signin-widget.d.ts, based on the PR's changes:

declare module '@okta/okta-signin-widget' {
  export default class OktaSignIn implements OktaSignIn {
    constructor(configuration: OktaSignInConfig)

    renderEl(configuration: { el: string }): void
    remove(): void

    session: {
      get: (callback: (repsonse: any) => void) => void
    }
  }

  export type OktaSignInConfigAuthParamsResponseMode = 'okta_post_message' | 'fragment' | 'query' | 'form_post'

  export interface OktaSignInConfigAuthParams {
    pkce?: boolean
    responseMode?: OktaSignInConfigAuthParamsResponseMode
    issuer?: string
    display?: 'page'
    scopes?: string[]
    responseType?: string[]
  }

  interface OktaSignInConfigi18n {
    en?: {
      'primaryauth.username.placeholder'?: string
      'primaryauth.username.tooltip'?: string
      'primaryauth.title'?: string
      'error.username.required'?: string
      'error.password.required'?: string
    }
  }

  interface OktaSignInConfig {
    baseUrl: string
    logo?: string
    clientId?: string
    redirectUri?: string
    authParams: OktaSignInConfigAuthParams
    i18n?: OktaSignInConfigi18n
  }
}

如何在 Vue Okta 应用程序中设置 Okta 登录小部件

How to set up Okta Signin Widget in Vue Okta app

vue.js

vuejs3

okta

vue-cli-4

okta-signin-widget