stfalcon-studio/vue-bankid-se

VUE-BANKID-SE

Component, which allows to simply implement swedish bankId at vue. It integrates with mobile app:

• if vue app is openned on mobile, then performes redirect to mobile BankId app by clicking on vue-bank-se component. And when user authenticates, mobile app redirects back and vue component requires session from the server.
• if vue app is openned on desktop, then showes QR code by clicking on vue-bank-se component. After that user can scan code with mobile bankId app and authenticate. Simultaniously the vue app requests session with some interval

Installing

npm i @stfalcon/vue-bank-id-se

Interface for use

It receives a component (in default slot) as an actor.

It receives a component as wrapper for showing QR-code in scoped slot qrDialog. This scoped slot returns imgUrl(base64 image to insert into img tag), countdownTime(time is left to close dialog) and closeDialog(function which you can call to close the dialog)

requestToken: () => Promise<{ autoStartToken<string>, orderRef<string> }> - required. Initialize BankId session at server.

requestSesstion: ({ orderRef<string> }) => Promise<any> - required. Requires session from server by orderRef. If you want that dialog will be closed automatically then requestSesstion should return any defined value.

tryCount: Number - optional(default 10), is used only for desktop. Number of tries to require requestSesstion

qrDuration: Number - optional(default 50), is used only for desktop. Full duration of showing QR-code.

Note: If you specify tryCount = 2, qrDuration = 30 - it means that that QR popup will be shown within 30 seconds and it will make two requests to server: first at 15sec and second at 30sec.

Example of usage

<template>
  <BankIdLogin
    :request-session="onLogin"
    :request-token="startBankIdSession"
    :try-count="2"
    :qr-duration="30"
  >
    <button type="primary">
      Login with BankId
    </button>

    <template v-slot:qrDialog="props">
      <QrDialog v-bind="props"/>
    </template>
  </BankIdLogin>
</template>

<script>
import BankIdLogin from '@stfalcon/vue-bank-id-se';
import QrDialog from '@/components/MyDialog';

export default {
  name: 'Auth',
  components: { BankIdLogin, QrDialog },
  methods: {
    ...mapActions('auth', ['login', 'startBankIdSession']),
    async onLogin(ref) {
      await this.login(ref);
      this.$router.push('/registration');
    },
  },
};
</script>