如何在Vue Okta应用程序中设置Okta签名

Question

我正在尝试将okta signin小部件集成到一个Vue 3项目中，基于以下内容：(Okta登录-In widget和Vue \ Okta Developer)。但是，即使在通过OktaSignIn安装之后，也无法将yarn add @okta/okta-signin-widget导入到配置文件中。换句话说，我不能将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错误：

找不到模块'@okta/okta-signin-widget'的声明文件。'/projectRoot/node_modules/@okta/okta-signin-widget/dist/js/okta-sign-in.entry.js'隐式具有'any'类型。 如果npm i --save-dev @types/okta__okta-signin-widget存在，可以尝试它，或者添加一个包含declare module '@okta/okta-signin-widget';的新声明(.d.ts)文件

该模块还不支持自己的类型，但支持有个公开的公关。作为解决办法，您可以在src/okta-signin-widget.d.ts上根据PR的变化声明项目中的类型

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
  }
}