Beranda>Kode sumber ASP>Kategori lainnya
Unduh

Karena halaman yang diakses oleh situs web pengunjung tidak dihasilkan secara dinamis ketika mereka diminta tetapi pra-dihasilkan dan berfungsi sebagai file HTML statis, proses meluncurkan fitur dan konten baru terlihat sedikit berbeda dari dalam aplikasi web "tradisional".

  1. Pengembangan Lokal: Pengembangan fitur baru dapat dilakukan secara lokal.

    Nuxt.js dilengkapi dengan alat yang sangat efektif untuk mendukung pengalaman pengembang yang hebat seperti server dev dengan penggantian modul panas dan pemisahan ulang langsung.

    Konten untuk produk disimpan dalam repositori GIT bersama dengan kode sumber, sehingga pengembang dapat menggunakan data produk nyata selama implementasi dan pengujian.

    Titik akhir API harus dibungkus menggunakan beberapa server tiruan, misalnya Wiremock atau mockserver, agar bekerja secara mandiri dari sistem eksternal nyata. Untuk otentikasi OpenId Connect, pertimbangkan untuk mengatur Keycloak secara lokal.

    Catatan: Proyek contoh ini tidak termasuk server tiruan.

  2. Konten Pra-Fetching: Setiap kali data produk baru atau yang diperbarui harus dipublikasikan di situs web file JSON konten pra-yang harus diperbarui dalam repositori Git sebelum versi baru file HTML statis dihasilkan.

    Skrip konten Node.js khusus akan terhubung ke Salesforce dan mengambil data terbaru melalui Salesforce REST API. File JSON konten diperbarui sesuai dan dapat dilakukan ke repositori git.

    Terserah Anda di mana dan kapan skrip ini dieksekusi. Misalnya, ini dapat berjalan sebagai tindakan github atau dalam proses CI pada Travis CI.

    Catatan: Salesforce hanyalah contoh dari sumber data potensial untuk memperoleh konten. File konten juga dapat dibuat dari sumber data lainnya.

  3. Menerbitkan File HTML Statis: Setiap komit dalam repositori git mewakili implementasi dan status konten situs web yang berpotensi dipublikasikan.

    Proses build mengubah kode sumber menjadi potongan yang dioptimalkan dan menghasilkan file HTML statis dengan menghitung semua rute yang dapat diakses untuk komponen halaman yang diimplementasikan dan file konten yang sudah dikupas sebelumnya.

    Akhirnya, semua file situs web yang dihasilkan dapat dipublikasikan ke server web atau jaringan pengiriman konten apa pun, misalnya Netlify.

    CATATAN: Proses build juga dapat memanfaatkan permintaan API untuk memuat konten yang tidak disimpan dalam file konten di repositori git.

  4. Peningkatan Dinamis melalui API: Pengunjung dilayani file HTML statis saat memuat situs web di browser. Ini sangat cepat karena tidak ada yang perlu dihasilkan secara dinamis di server.

    Setelah halaman web memuat javascript dinamis menendang dan meningkatkan halaman dengan fitur dinamis. Ini bisa menjadi fitur seperti keranjang belanja atau menampilkan konten pengguna yang dipersonalisasi.

    Data dinamis dapat diambil dengan mengirim permintaan API dari browser. Pengunjung dapat mengotentikasi menggunakan protokol standar seperti OAuth 2.0 dan OpenID Connect untuk memungkinkan situs web menyajikan konten individual.

Menjalankan showcase

Prasyarat

  • Node.js 12.x atau lebih tinggi
  • Manajer paket benang
  • Organisasi Salesforce, misalnya Edisi Pengembang Gratis

Menyiapkan Salesforce

Menyiapkan pengguna dan profil uji

Mengapa? Ini memungkinkan login dengan pengguna pelanggan sejati di komunitas petir.

  1. Open Salesforce pengaturan dan navigasikan ke "komunitas". Pastikan komunitas diaktifkan.
  2. Dalam pengaturan Salesforce navigasikan ke "profil".
  3. Kloning profil "pengguna komunitas pelanggan" untuk membuat profil khusus khusus untuk pengguna komunitas baru. Misalnya, sebut saja "Contoh Pengguna Pelanggan".
  4. Buka cloud penjualan untuk membuat akun dan kontak untuk tujuan pengujian. Pada tampilan Kontak Pilih tindakan cepat "Aktifkan pengguna pelanggan".
    • Atur "Lisensi Pengguna" ke "Komunitas Pelanggan".
    • Tetapkan profil yang dibuat pada langkah sebelumnya.
    • Masukkan alamat email Anda sendiri untuk menerima pesan email selamat datang setelah pengguna ditambahkan sebagai anggota ke komunitas.

Menginstal metadata Salesforce

Langkah ini diperlukan jika Anda berencana untuk menggunakan skrip pembaruan konten dan jika Anda ingin mengatur logout otomatis di komunitas Lightning ketika pengguna keluar di situs web.

Mengapa? Ini menambahkan objek khusus "Kategori Produk" ke Salesforce Org Anda dan menginstal bidang khusus pada objek Product2 untuk memungkinkan Anda mendefinisikan kategori yang dimiliki produk. Ini juga menginstal komponen web Lightning untuk digunakan pada halaman komunitas logout khusus yang secara otomatis akan mencatat pengguna.

  1. Unduh dan instal Salesforce CLI.

  2. Buka terminal di Direktori salesforce .

  3. Hubungkan Salesforce CLI ke orgforce org Anda. 

    sfdx force:auth:web:login -a MyOrg -s

  4. Menyebarkan proyek SFDX ke orgforce org Anda. 

    sfdx force:source:deploy -p force-app

Menyiapkan pengguna integrasi

Mengapa? Ini memungkinkan server API dan skrip konten untuk terhubung ke Salesforce dengan pengguna teknis tertentu yang memungkinkan untuk kontrol akses individu.

  1. Open Salesforce Setup dan Navigasi ke "Pengguna".
  2. Buat pengguna baru.
    • Tetapkan "Lisensi Pengguna" ke "Salesforce"
    • Tetapkan profil "Administrator Sistem".
    • Beri pengguna beberapa nama seperti "integrasi".
    • Masukkan alamat email Anda sendiri untuk menerima email pendaftaran.
  3. Jika Anda berencana untuk menggunakan skrip pembaruan konten, harap tetapkan set izin "Editor Kategori Produk" ke pengguna integrasi.
  4. Konfirmasikan email verifikasi dan selesaikan pendaftaran pengguna dengan memasukkan kata sandi baru.
  5. Masuk ke Salesforce dengan pengguna integrasi itu.
  6. Di menu pengguna di sebelah ikon Setup Pilih "Pengaturan".
  7. Arahkan ke "Reset Token Keamanan Saya" dan klik tombol "Reset Token Keamanan". Anda harus menerima token baru melalui email.

Menyiapkan Komunitas Petir

Mengapa? Diperlukan untuk menampilkan halaman login selama aliran otentikasi OpenID Connect.

  1. Open Salesforce pengaturan dan navigasikan ke "semua komunitas".
  2. Klik tombol "Komunitas Baru" dan pilih template "Bangun sendiri". Berikan nama sewenang -wenang dan lebih disukai meninggalkan URL kosong.
  3. Buka "ruang kerja" komunitas baru dan pergi ke "administrasi".
  4. Di bagian "Pengaturan" mengaktifkan komunitas.
  5. Sedikit untuk kembali ke pengaturan Salesforce di "All Communities" dan buka "pembangun" komunitas baru. Klik tombol "Publikasikan".
  6. Kembali ke "ruang kerja" komunitas pergi ke bagian "email" dan masukkan alamat email Anda sendiri di konfigurasi "pengirim". Pastikan untuk mengonfirmasi pesan email yang dikirimkan kepada Anda.
  7. Aktifkan kotak centang "Kirim Email Selamat Datang".
  8. Di bagian "Anggota", tetapkan profil yang sebelumnya dibuat untuk pengguna komunitas pelanggan (misalnya "Contoh Pengguna Pelanggan"). Anda harus menerima pesan email selamat datang untuk pengguna uji yang dibuat sebelumnya. Lengkapi pendaftaran pengguna dengan memasukkan kata sandi baru.

Jika Anda ingin mengatur logout otomatis untuk pengguna komunitas ketika mereka keluar di situs web melakukan langkah -langkah tambahan ini:

  1. Buka "ruang kerja" komunitas dan pergi ke "administrasi".
  2. Di bagian "Login & Pendaftaran" masukkan URL logout situs web di bidang "Logout Page URL" (misalnya jika menjalankan situs web di http: // localhost: 3000 Masukkan URL http: // localhost: 3000/logout)
  3. Beralih kembali ke pengaturan Salesforce di "semua komunitas" dan buka "pembangun" komunitas.
  4. Buat halaman standar kosong dengan tata letak konten yang sewenang-wenang (misalnya "1 kolom lebar penuh"). Berikan halaman nama "Logout" dan URL "Logout".
  5. Di Pengaturan Halaman, setel "akses halaman" ke "membutuhkan login".
  6. Seret komponen khusus "JSEC Auto Logout" dari panel "komponen" ke wilayah konten halaman. Jangan bingung: Ini akan segera mengarahkan Anda ke halaman kesalahan di Penghuara Pengalaman karena komponen itu mencoba untuk mengeluarkan pengguna saat diterjemahkan. Ini hanya indikator bahwa komponen berfungsi seperti yang diharapkan.
  7. Publikasikan perubahan yang dilakukan kepada masyarakat.

Menyiapkan aplikasi yang terhubung

Mengapa? Diperlukan untuk otentikasi OpenID Connect untuk pengunjung situs web dan memungkinkan server API dan skrip konten untuk terhubung ke Salesforce dengan cara yang aman.

  1. Buka Salesforce Setup dan navigasikan ke "Manajer Aplikasi".
  2. Klik tombol "Aplikasi Terhubung Baru" dan masukkan data berikut.
    • Nama aplikasi yang terhubung: (Pilih apapun yang Anda suka, misalnya "OIDC Lokal")
    • Nama API: (Pilih apapun yang Anda suka, misalnya "Local_oidc")
    • Kontak Email: (Alamat email Anda)
    • Aktifkan Pengaturan OAuth: Diaktifkan
    • URL panggilan balik: http: // localhost: 3000/login/panggilan balik
    • OAUTH SCOPED yang Dipilih:
      • Akses Informasi Dasar Anda (ID, Profil, Email, Alamat, Telepon)
      • Izinkan akses ke pengidentifikasi unik Anda (OpenID)
      • Lakukan permintaan atas nama Anda kapan saja (refresh_token, offline_access)
    • Membutuhkan rahasia untuk aliran server web: dinonaktifkan
    • Konfigurasikan Token ID: Diaktifkan
    • Token valid untuk: (beberapa seumur hidup sesi yang masuk akal, misalnya 240 menit)
    • Audiens Token ID: (Biarkan Kosong, Berarti Kunci Konsumen Digunakan)
    • Sertakan klaim standar: diaktifkan
  3. Dari tampilan aplikasi yang terhubung, salin "Kunci Konsumen" dan "Rahasia Konsumen" untuk digunakan nanti dalam parameter konfigurasi.
  4. Klik tombol "Kelola" dan kemudian "Edit Kebijakan".
  5. Atur bidang "Pengguna yang Diizinkan" ke "Pengguna Admin yang disetujui adalah pra-otorisasi".
  6. Di panel "Profil" klik tombol "Kelola Profil" dan tetapkan kedua profil yang sebelumnya dibuat untuk pengguna komunitas pelanggan (misalnya "Pengguna Pelanggan") dan profil untuk pengguna integrasi (misalnya "Administrator Sistem").

Konfigurasi Aplikasi Salesforce Connected

Menjalankan skrip pembaruan konten

Langkah ini opsional karena repositori Git sudah berisi beberapa contoh produk dan kategori untuk demonstrasi.

Anda harus memiliki beberapa catatan untuk objek Product2 di Salesforce Org Anda yang aktif dan memiliki entri buku harga dalam beberapa buku harga yang digunakan untuk pembaruan konten.

Anda juga dapat membuat beberapa kategori produk dan menugaskannya ke produk Anda.

Catatan: Skrip mengharuskan metadata Salesforce untuk digunakan di org Anda.

  1. Buka terminal dalam content-scripts direktori.

  2. Atur variabel lingkungan berikut.

    Nama Keterangan
    Salesforce_instance_url URL dasar dari instance Salesforce (pola https://xx##.salesforce.com )
    Salesforce_api_version Versi API Salesforce untuk digunakan
    Salesforce_token_endpoint OAuth 2.0 Token Endpoint dari Salesforce Instance
    Salesforce_client_id Kunci konsumen dari aplikasi yang terhubung (disalin sebelumnya dari tampilan aplikasi)
    Salesforce_client_secret Rahasia konsumen dari aplikasi yang terhubung (disalin sebelumnya dari tampilan aplikasi)
    Salesforce_username Nama pengguna pengguna integrasi
    Salesforce_password Kata Sandi Pengguna Integrasi + Token Keamanan (cukup gabungkan keduanya)
    Salesforce_price_book_name Opsional. Buku harga untuk digunakan. Default: "Buku Harga Standar"

    Contoh: 

    SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n

    Kiat: Anda dapat menempatkan penugasan variabel ini ke dalam file yang disebut .env dalam content-scripts direktori untuk pengembangan dan pengujian.

  3. Instal dependensi Node.js. 

    yarn install

  4. Jalankan skrip untuk memperbarui kategori dan produk file JSON di content direktori. 

    yarn start

Menjalankan server API

  1. Buka terminal di api direktori.

  2. Atur variabel lingkungan berikut.

    Nama Keterangan
    PELABUHAN Port server lokal untuk mendengarkan. Default: 3000
    Salesforce_instance_url URL dasar dari instance Salesforce (pola https://xx##.salesforce.com )
    Salesforce_api_version Versi API Salesforce untuk digunakan
    Salesforce_token_endpoint OAuth 2.0 Token Endpoint dari Salesforce Instance (bukan Komunitas)
    Salesforce_jwks_endpoint OpenID Connect JSON Web Key Set Endpoint dari Salesforce Lightning Community
    Salesforce_issuer_url URL penerbit termasuk dalam token ID yang dikeluarkan oleh Salesforce
    Salesforce_client_id Kunci konsumen dari aplikasi yang terhubung (disalin sebelumnya dari tampilan aplikasi)
    Salesforce_client_secret Rahasia konsumen dari aplikasi yang terhubung (disalin sebelumnya dari tampilan aplikasi)
    Salesforce_username Nama pengguna pengguna integrasi
    Salesforce_password Kata Sandi Pengguna Integrasi + Token Keamanan (cukup kumpulkan keduanya)
    Salesforce_price_book_name Opsional. Buku harga untuk digunakan. Default: "Buku Harga Standar"
    Security_cors_origin URL dasar dari aplikasi web diizinkan untuk mengakses server.

    Contoh: 

    PORT=4000
SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
SALESFORCE_API_VERSION=49.0
SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
SALESFORCE_CLIENT_ID=3MVG9...ru7XA
SALESFORCE_CLIENT_SECRET=17DAD...0110F
[email protected]
SALESFORCE_PASSWORD=abcde...KiQ9n
SECURITY_CORS_ORIGIN=http://localhost:3000

    Kiat: Anda dapat menempatkan penugasan variabel ini ke dalam file yang disebut .env di api direktori untuk pengembangan dan pengujian.

  3. Instal dependensi Node.js. 

    yarn install

  4. Jalankan server. 

    yarn start

Menjalankan Aplikasi Web

  1. Buka terminal di direktori root proyek.

  2. Atur variabel lingkungan berikut.

    Nama Keterangan
    API_URL URL dasar dari server API
    LOGOUT_URL Opsional. URL Halaman Logout dari Salesforce Lightning Community
    Oauth2_authorize_endpoint OAuth 2.0 Otorisasi Titik Akhir Komunitas Petir Salesforce
    Oauth2_userinfo_endpoint Info akhir titik akhir dari server API
    Oauth2_client_id Kunci konsumen dari aplikasi yang terhubung (disalin sebelumnya dari tampilan aplikasi)
    OAuth2_Scopes OAuth 2.0 SCOPES Untuk meminta selama otentikasi, dipisahkan secara koma

    Contoh: 

    API_URL=http://localhost:4000
LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
OAUTH2_CLIENT_ID=3MVG9...ru7XA
OAUTH2_SCOPES=openid,id

    Kiat: Anda dapat menempatkan penugasan variabel ini dalam file yang disebut .env di direktori root proyek untuk pengembangan dan pengujian.

    CATATAN: Jika variabel LOGOUT_URL tidak disediakan pengguna akan segera diarahkan ke halaman logout situs web tanpa perjalanan pulang pergi eksternal.

  3. Instal dependensi Node.js. 

    yarn install

  4. Luncurkan server pengembangan yang menawarkan muat ulang ... 

    yarn dev

  5. ... atau menghasilkan file HTML statis terlebih dahulu dan kemudian melayani file -file ini dari direktori dist . 

    yarn generate
yarn start

  6. Buka browser Anda di http: // localhost: 3000

Lisensi

Lisensi MIT

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua