Bina aplikasi sudut dengan widget log masuk Okta dalam 15 minit

sorotan utama:

Walaupun kekurangan keserasian mundur, Angular 2 dan 4 tetap sangat popular, memperoleh tempat ketiga di kalangan kerangka UI (selepas React dan HTML5).
Okta menawarkan API mesra pengguna untuk pengurusan akaun pengguna yang diselaraskan, dengan lancar mengintegrasikan dengan aplikasi sudut. Widget masuknya menyediakan penyelesaian JavaScript yang disesuaikan yang merangkumi penetapan semula kata laluan, pemulihan kata laluan yang terlupa, dan ciri pengesahan yang mantap.
Mengintegrasikan widget log masuk Okta ke dalam projek sudut adalah mudah menggunakan NPM dan kod minimum, yang membolehkan penyesuaian untuk memadankan estetika aplikasi.
Ujian menyeluruh dalam aplikasi sudut difasilitasi oleh Okta, dengan sebarang isu yang mudah diselesaikan dengan menentukan Okta sebagai pembekal. Permohonan lengkap boleh diakses di GitHub.

Walaupun AngularJs pernah menguasai rangka kerja MVC JavaScript, pengumuman keserasian yang tidak bersemangat untuk versi berikutnya menyebabkan beberapa pergolakan komuniti, memberi manfaat kepada pesaing seperti React dan Vue.js. Walau bagaimanapun, Angular 2 dan 4, memanfaatkan TypeScript, telah terbukti sangat berdaya tahan, mengekalkan kedudukan yang kuat sebagai kerangka UI yang paling popular ketiga.

Artikel ini menunjukkan integrasi pesat widget log masuk Okta untuk pengesahan pengguna dalam aplikasi sudut asas. Bagi pemula sudut, tutorial sudut tambahan disyorkan. Kod sumber boleh didapati di GitHub.

mengapa memilih okta untuk pengesahan pengguna?

Okta menyediakan API yang komprehensif untuk menguruskan akaun pengguna, menyimpan data dengan selamat, dan menyambung ke pelbagai aplikasi. Ini memudahkan pengurusan akaun, meningkatkan keselamatan, dan mempercepatkan penggunaan. Widget log masuk Okta menawarkan penyelesaian log masuk JavaScript yang mudah disesuaikan dan mudah disesuaikan mencerminkan fungsi halaman log masuk standard Okta, termasuk penetapan semula kata laluan, ciri kata laluan yang terlupa, dan pengesahan yang kuat-semua diuruskan melalui dasar Okta, tidak memerlukan kod tersuai. Log masuk sosial juga disokong untuk aplikasi yang dihadapi pengguna.

Membina aplikasi sudut

dengan sudut 4 dan sudut CLI 1.0, membuat aplikasi baru adalah mudah:

Pasang CLI Angular:
1. npm install -g @angular/cli
Buat aplikasi baru:
2. ng new angular-okta-example

Sahkan fungsi dengan

. ng e2e

Mengintegrasikan widget log masuk Okta

1. Pasang widget: npm install --save @okta/okta-signin-widget
2. tambah css ke src/styles.css:

@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';

3. membuat src/app/shared/okta/okta.service.ts untuk menguruskan widget:

import { Injectable } from '@angular/core';
import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';

@Injectable()
export class Okta {
  widget;

  constructor() {
    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com',
      clientId: '{clientId}',
      redirectUri: 'http://localhost:4200'
    });
  }

  getWidget() {
    return this.widget;
  }
}

4. tambah Okta sebagai pembekal dalam app.module.ts.

5. Buat aplikasi OpenID Connect dalam akaun Okta anda, menggantikan tempat letak dalam okta.service.ts dengan ClientId anda dan Okta Domain.

6. Melaksanakan fungsi login/logout dalam app.component.ts dan laraskan app.component.html untuk memaparkan widget dan maklumat pengguna.

Ujian dan penyesuaian

RUN ng serve sebagai pembekal dalam Okta. Sesuaikan penampilan widget dengan membuat CSS tersuai. Permohonan yang lengkap boleh didapati di GitHub. src/app/app.component.spec.ts

Soalan Lazim (Soalan Lazim) (Ini diringkaskan untuk keringkasan; rujuk kepada asal untuk jawapan lengkap.)

• Integrasi Okta dengan Angular: Pasang SDK sudut Okta, konfigurasikannya dengan domain Okta dan ID pelanggan anda, dan gunakan kaedah untuk pengesahan, pengurusan sesi, dan keselamatan laluan.
• OktaAuthService: Menguruskan Pengesahan Pengguna, termasuk Login, Logout, Pemeriksaan Pengesahan, dan Pengendalian Sesi.
• Mengamankan laluan: Gunakan untuk menyekat akses kepada pengguna yang disahkan. OktaAuthGuard
• komponen panggil balik Okta: mengendalikan panggilan balik pengesahan dari Okta.
• Menyesuaikan halaman log masuk: Sesuaikan melalui papan pemuka admin Okta atau dengan html/css adat.
• Pengurusan Sesi: Gunakan kaedah Okta untuk membuat, memeriksa, memperbaharui, dan menutup sesi.
Pengurus Token Okta:
• Menguruskan token dengan selamat.
pengendalian ralat:
• SDK menyediakan keupayaan pengendalian ralat.
ujian:
• Gunakan ujian unit dengan perkhidmatan mock.
mengemas kini sdk:
• gunakan . npm update
Okta memudahkan pengesahan, membolehkan pemaju memberi tumpuan kepada ciri -ciri aplikasi. Akaun pemaju percuma tersedia untuk percubaan. Untuk pertanyaan, rujuk Stack Overflow, Twitter, atau GitHub.

Atas ialah kandungan terperinci Bina aplikasi sudut dengan widget log masuk Okta dalam 15 minit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!