Pengesahan Angularjs Mudah dengan Auth0

Artikel ini telah dikemas kini (11.05.2017) untuk mencerminkan perubahan kepada Aut0's API. Mengamankan aplikasi satu halaman (SPA) boleh mencabar. SPAS sering terdiri daripada front-end berasingan (mis., AngularJS) dan API data back-end. Pengesahan berasaskan sesi tradisional tidak sesuai untuk seni bina ini kerana ia memperkenalkan keadaan kepada API, melanggar prinsip rehat dan menghalang integrasi aplikasi mudah alih.

Kelebihan utama pendekatan ini:

• Pengesahan Stateless: JSON Web Tokens (JWTS) Dayakan Pengesahan Secure, Stateless, dengan lancar mengintegrasikan dengan backend mudah alih.
• Pengurusan Pengguna yang dipermudahkan: Auth0 memudahkan pengurusan pengesahan pengguna, termasuk log masuk sosial dan sokongan multi-profil.
• Integrasi yang diselaraskan: Perpustakaan Auth0 dan modul AngularJS Memudahkan proses pengesahan, mengautomasikan pengendalian token dan pengurusan sesi.
• Keselamatan yang dipertingkatkan: JWTS disimpan dengan selamat dalam penyimpanan tempatan meningkatkan keselamatan semasa mengakses titik akhir API yang dilindungi.
• Integrasi Login Sosial Mudah: Dayakan Login Sosial Popular dengan Toggles Dashboard Auth0 Simple.
• endpoint endpoints API yang selamat: pelayan NodeJS dengan pengesahan JWT melindungi titik akhir API, memastikan hanya pengguna yang disahkan mengakses data sensitif.

token web json (jwts): penyelesaian tanpa stateless

JWTS mengatasi batasan pengesahan berasaskan sesi. Ini standard terbuka mengesahkan permintaan dari angularjs front-end ke API back-end. Secara kritis, JWT mengandungi muatan JSON dengan tuntutan tersuai, ditandatangani secara digital untuk ujian-proofing.

Pelaksanaan Pengesahan AngularJS

JWTS sangat sesuai untuk pengesahan AngularJS. Titik akhir API yang dijamin diakses dengan menyimpan JWT pengguna dalam storan tempatan dan termasuk dalam tajuk kebenaran permintaan HTTP. JWTS yang tidak sah atau hilang mengakibatkan penafian akses.

di luar pengesahan asas, pelaksanaan AngularJS yang mantap memerlukan:

• rendering bersyarat: menunjukkan/menyembunyikan elemen (butang login/logout) berdasarkan kesahihan JWT.
• Perlindungan Laluan: Mencegah pengguna yang tidak disahkan daripada mengakses laluan tertentu.
• kemas kini UI: Kemas kini UI apabila keadaan pengguna berubah (JWT Expiration, Logout).

Tutorial ini menunjukkan pelaksanaan pengesahan AngularJS lengkap, termasuk pelayan NodeJS untuk akses sumber yang dilindungi. Daripada membina pangkalan data pengguna dan terbitan JWT, kami memanfaatkan peringkat percuma Auth0 (sehingga 7,000 pengguna aktif). Integrasi log masuk sosial juga ditunjukkan.

(imej: auth0 dashboard)

persediaan auth0

1. Buat akaun Auth0: Daftar untuk akaun Auth0, memilih nama domain (mis., yourcompany.auth0.com). Ini tidak dapat diubah kemudian.
2. Konfigurasikan aplikasi lalai: dalam papan pemuka Auth0, navigasi ke bahagian pelanggan dan mengakses aplikasi lalai . Konfigurasi Asal -usul yang dibenarkan dan dibenarkan URL Callback (mis., untuk tutorial ini). http://localhost:8080
3. Buat API: di bawah bahagian APIS , buat API baru, mencatat pengenal (digunakan sebagai penonton Permohonan). Dayakan penyedia identiti sosial (pilihan): Dayakan log masuk sosial (mis., Google, Facebook) dengan bertukar -tukar pilihan dalam sambungan
4. & gt; Social seksyen. Pemasangan dan Konfigurasi

Pasang pakej yang diperlukan (menggunakan jika anda telah melancarkan repo github):

Mulakan pelayan menggunakan bower install. Konfigurasikan

dan

npm install -g http-server

untuk mengintegrasikan Auth0. Gantikan nilai pemegang tempat dengan kelayakan Auth0 anda:

http-server app.js fail index.html mengendalikan menghuraikan hash selepas pengesahan:

// app.js (snippet)
angularAuth0Provider.init({
  clientID: AUTH0_CLIENT_ID,
  domain: AUTH0_DOMAIN,
  responseType: 'token id_token',
  redirectUri: AUTH0_CALLBACK_URL,
  audience: AUTH0_API_AUDIENCE,
});

app.run.js (imej: halaman log masuk angularjs)

// app.run.js (snippet)
authService.handleParseHash();

(Imej: AngularJS Logged-In State)

(Imej: AngularJS Logout State)

Penciptaan Homepage

Fail menyediakan UI mudah dengan butang login/logout dan butang panggilan API. Fail mengendalikan panggilan API menggunakan

:

home.html home.controller.js $http Perkhidmatan Pengesahan ()

// home.controller.js (snippet)
vm.getSecretMessage = function() {
  $http.get('http://localhost:3001/api/private', {
    headers: { Authorization: 'Bearer ' + localStorage.getItem('access_token') }
  })
  .then(...)
  .catch(...);
};

Perkhidmatan ini mengendalikan Login, Logout, dan Pengesahan Negeri Pengesahan: auth.service.js

Penciptaan pelayan NODEJS

3

// auth.service.js (snippet)
function authService($state, angularAuth0, authManager) {
  // ... login, handleParseHash, logout, isAuthenticated functions ...
}

Mulakan pelayan dengan . Aplikasi AngularJS kini boleh membuat permintaan ke titik akhir API yang dilindungi.

Pertimbangan lanjut dan Soalan Lazim express-jwt jwks-rsa

Artikel ini disimpulkan dengan seksyen mengenai ciri Auth0 tambahan (SSO, Login Tanpa Kata Laluan, MFA) dan backends yang disokong dan SDK mudah alih yang lain. Seksyen FAQ yang komprehensif menangani soalan-soalan umum mengenai log masuk sosial, pengurusan sesi, keselamatan laluan, penyegaran token, pengendalian ralat, penyesuaian, pengesahan multi-faktor, cangkuk, ujian, dan debugging. Ingatlah untuk menggantikan ruang letak seperti {YOUR-AUTH0-DOMAIN} dan {YOUR-AUTH0-API-AUDIENCE} dengan nilai Auth0 sebenar anda.

Atas ialah kandungan terperinci Pengesahan Angularjs Mudah dengan Auth0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!