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

Question

我正在尝试基于以下内容将 okta 登录小部件集成到 Vue 3 项目中：（Okta 登录小部件和 Vue | Okta 开发人员）。 但是，即使通过yarn add @okta/okta-signin-widget安装，OktaSignIn 似乎也无法导入配置文件。 换句话说，我无法将import OktaSignIn from '@okta/okta-signin-widget'添加到 main.ts，因为 package 似乎不可用。 这个小部件是否还不适用于 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

通过“package 似乎不可用”，我假设您指的是这个 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';

该模块尚不支持其自己的类型，但有一个开放的 PR 。 作为一种解决方法，您可以根据 PR 的更改在src/okta-signin-widget.d.ts声明项目中的类型：

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