0

我正在尝试基于以下内容将 okta 登录小部件集成到 Vue 3 项目中：（Okta 登录小部件和 Vue | Okta 开发人员）。但是，即使通过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 };
4

1 回答 1

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它是否存在或添加一个新的声明 (.d.ts) 文件，其中包含declare module '@okta/okta-signin-widget';

该模块尚不支持其自己的类型，但有一个开放的 PR。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
  }
}
于 2022-01-31T05:19:14.310 回答