` van de pagina moeten zien. Als de stijl een hogere prioriteit heeft, zou deze moeten kunnen overschrijven. Als je bijvoorbeeld je inlogpagina een gevoel van **_Night City_** wilt geven, probeer deze CSS: <details> <summary> <b>Klik om CSS en voorbeeld uit te breiden</b> </summary> ```css @font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #app * { font-family: 'Share Tech'; letter-spacing: 0.5px; } #app > div[class$='viewBox'] { background-image: url(https://silverhand.io/assets/v-in-nc.jpg); background-size: cover; } #app main[class$='main'] { background-image: url(https://silverhand.io/assets/gentle-universe.png); background-size: cover; opacity: 0.98; min-height: initial; padding: 24px; padding-bottom: 72px; border-radius: 12px; } #app main[class$='main'] img[class$='logo'] { content: url(https://silverhand.io/assets/cyberpunk-2077.png); margin: -20px 0 -12px; height: 160px; } #app main[class$='main'] div[class$='headline'] { visibility: hidden; height: 60px; } #app main[class$='main'] div[class$='headline']:before { content: 'Welkom in Night City'; visibility: visible; display: block; font-family: 'Rock Salt'; font-style: italic; line-height: 60px; font-size: 20px; color: rgba(245, 250, 255, 0.6); padding: 0 20px; } #app form div[class$='inputField'] > div { outline: none; border: none; border-radius: 4px; } #app form div[class$='inputField'] > div > input, #app form div[class$='inputField'] div[class$='countryCodeSelector'] { background: initial; background-color: #453f67; font-family: 'Share Tech'; letter-spacing: 0.5px; font-size: 16px; font-weight: 600; } #app button { font-weight: 600; font-size: 16px; border-radius: 4px; } #app button[type='submit'] { background: linear-gradient(270.84deg, #2fd6fb -24.55%, #6369fc 44.33%, #a741eb 119.2%), #5d34f2; } ``` ![custom-css-preview](https://user-images.githubusercontent.com/14722250/221394786-4ae77638-8f35-4791-afae-8ab6a314dbf8.jpg) _"We hebben een stad om te verbranden!"_ </details> <Note> Aangezien Logto CSS Modules gebruikt, zie je mogelijk een hashwaarde in de `class` eigenschap van DOM-elementen (bijvoorbeeld een `<div>` met `vUugRG_container`). Om deze te overschrijven kun je de `$=` CSS-selector gebruiken om elementen te matchen die eindigen met een specifieke waarde. In dit geval zou het `div[class$=container]` moeten zijn. </Note> ### 🔗 Open standaard connectoren met betere configuratie interface Logto ondersteunt nu standaardprotocollen (SAML, OIDC en OAuth 2.0) voor het maken van sociale connectoren om externe identiteitsproviders te integreren. Elk protocol kan meerdere sociale connectoren maken, wat je meer controle geeft over je toegangsbehoeften. Bovendien hebben we de configuratie-interface voor SAML-connectoren geoptimaliseerd. Probeer het en laat ons je mening weten! ### 📄 Nieuwe taal Russische vertaling toegevoegd. (dank aan [@evist0](https://github.com/evist0)) ## 🎉 Nieuwe bijdragers - [@Alanimdeo](https://github.com/Alanimdeo) heeft hun eerste bijdrage geleverd in [#3064](https://github.com/logto-io/logto/pull/3064) - [@gadkins](https://github.com/gadkins) heeft hun eerste bijdrage geleverd in [#3032](https://github.com/logto-io/logto/pull/3032) - [@evist0](https://github.com/evist0) heeft hun eerste bijdrage geleverd in [#3158](https://github.com/logto-io/logto/pull/3158) - [@muratgozel](https://github.com/muratgozel) heeft hun eerste bijdrage geleverd in [#3203](https://github.com/logto-io/logto/pull/3203) Dank je wel! </article></body></html>

Terwijl Logto Cloud nog in aanbouw is, willen we graag enkele nieuwe functies introduceren aan ons fundament, Logto OSS. Dit zal de laatste versie zijn vóór de algemene beschikbaarheid. Opmerkelijke updates omvatten: - Geherstructureerde infrastructuur en verbeterde beveiliging - Slimme invoer en aangepaste CSS toegevoegd aan inlogervaring - Open standaard connectoren (SAML, OIDC en OAuth 2.0) - Nieuwe taalondersteuning Laten we eens kijken wat erin zit! ## 💥 VERANDERINGEN DIE ONDERBREKING VEROORZAKEN 💥 ### Ontkoppel normale gebruikers en beheerders Logto gebruikte één poort om zowel normale gebruikers als beheerders te bedienen, evenals de webconsole. Hoewel we continu een hoog beveiligingsniveau handhaven, is het toch beter om deze componenten in twee afzonderlijke delen te ontkoppelen om gegevens geïsoleerd te houden en een flexibele infrastructuur te bieden. ![image1](https://user-images.githubusercontent.com/14722250/221365507-6f20a804-1059-4933-9b88-df1244ab900b.png) Vanaf deze versie luistert Logto standaard naar twee poorten, een voor normale gebruikers (`3001`), en een voor beheerders (`3002`).

‼️ Klik om details uit te breiden

- Voor normale gebruikers is er niets veranderd. Er is geen aanpassing nodig. - Voor beheerder gebruikers: - De standaard Admin Console URL is veranderd naar `http://localhost:3002/console`. - Om de beheerder poort te veranderen, stel je de omgevingsvariabele `ADMIN_PORT` in. Bijvoorbeeld, `ADMIN_PORT=3456`. - Je kunt een aangepast eindpunt specificeren voor beheerders door de omgevingsvariabele `ADMIN_ENDPOINT` in te stellen. Bijvoorbeeld, `ADMIN_ENDPOINT=https://admin.jouw-domein.com`. - Je kunt nu beheerders eindpunten volledig uitschakelen door `ADMIN_DISABLE_LOCALHOST=1` in te stellen en `ADMIN_ENDPOINT` niet te configureren. - Admin Console en beheerders gebruikersdata zijn niet toegankelijk via normale gebruikers eindpunten, inclusief `localhost` en `ENDPOINT` van de omgeving. - Admin Console toont geen audit logs van beheerders meer. Deze logs bestaan echter nog steeds in de database en Logto voegt nog steeds beheerders gebruikerslogs toe. Er is alleen geen handige interface om ze te inspecteren. - Door de gegevensisolatie kunnen de cijfers op het dashboard iets dalen (beheerders zijn uitgesloten). - Resource Indicator voor Logto Management API is veranderd van `https://api.logto.io` naar `https://default.logto.app/api`.

Als je upgrade van een vorige versie, voer je gewoon het [database wijzigingscommando](https://docs.logto.io/docs/tutorials/using-cli/database-alteration) uit zoals gebruikelijk, en wij zorgen voor de rest. Achter de schermen gebruiken we de krachtige Postgresfunctie Row-Level Security om beheerder- en gebruikersdata te isoleren. ### CORS-beleid - Als `ADMIN_ENDPOINT` niet is gespecificeerd, wordt `localhost:[admin-port]` toegestaan voor Cross-Origin Resource Sharing (CORS) in Logto. - Als `ADMIN_ENDPOINT` is gespecificeerd, worden alleen verzoeken van de oorsprong van `ADMIN_ENDPOINT` toegestaan. ## 🔐 Beveiligingsupdate In eerdere versies werden bij het registreren of wijzigen van wachtwoorden alle nieuwe wachtwoorden in platte tekst opgeslagen in de Audit Logs alvorens versleuteld en ingevoerd in de database. In deze versie hebben we het proces bijgewerkt om wachtwoordvelden volledig te maskeren voordat ze worden ingevoerd in de Audit Logs. Voor verbeterde beveiliging en naleving raden we sterk aan om alle wachtwoorden uit de Audit Logs te verwijderen of alle logs die wachtwoorden bevatten te verwijderen. Als je vragen hebt over dit probleem of het verwijderen van gegevens, aarzel dan niet om contact met ons op te nemen via e-mail of Discord. ## 🧑‍🚀 Functie-update ### 💡 Slimme invoer voor inlogervaring We hebben traditionele invoervelden voor gebruikersnaam, telefoonnummer en e-mailadres geïntegreerd in één enkele intelligente invoervak:

Dit geavanceerde invoervak herkent automatisch het type karakters dat je typt, zoals een `@` teken of opeenvolgende cijfers, en biedt relevante foutfeedback. Door het inlogproces te stroomlijnen, hoeven gebruikers geen tijd meer te verspillen met het uitzoeken op welke knop ze moeten klikken om hun gewenste inlogmethode te wisselen. Dit vermindert het risico op fouten en zorgt voor een soepelere inlogervaring. ### 🎨 Aangepaste CSS in inlogervaring We hebben veel moeite gestoken in het verbeteren van de gebruikersinlogervaring en hebben een merkkleuroptie voor de UI geboden. We weten echter dat fijnafstemming van UI-vereisten onvoorspelbaar kan zijn. Terwijl Logto nog steeds de beste opties voor personalisatie verkent, willen we een programmatische methode bieden om jouw ontwikkeling te ontgrendelen. Je kunt nu de Management API `PATCH /api/sign-in-exp` gebruiken met body `{ "customCss": "arbitrary string" }` om aangepaste CSS in te stellen voor de inlogervaring. Je zou de waarde van `customCss` na `` van de pagina moeten zien. Als de stijl een hogere prioriteit heeft, zou deze moeten kunnen overschrijven. Als je bijvoorbeeld je inlogpagina een gevoel van **_Night City_** wilt geven, probeer deze CSS: <details> <summary> <b>Klik om CSS en voorbeeld uit te breiden</b> </summary> ```css @font-face { font-family: 'Rock Salt'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/rocksalt/v18/MwQ0bhv11fWD6QsAVOZrt0M6p7NGrQ.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Share Tech'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/sharetech/v17/7cHtv4Uyi5K0OeZ7bohU8H0JmBUhfrE.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } #app * { font-family: 'Share Tech'; letter-spacing: 0.5px; } #app > div[class$='viewBox'] { background-image: url(https://silverhand.io/assets/v-in-nc.jpg); background-size: cover; } #app main[class$='main'] { background-image: url(https://silverhand.io/assets/gentle-universe.png); background-size: cover; opacity: 0.98; min-height: initial; padding: 24px; padding-bottom: 72px; border-radius: 12px; } #app main[class$='main'] img[class$='logo'] { content: url(https://silverhand.io/assets/cyberpunk-2077.png); margin: -20px 0 -12px; height: 160px; } #app main[class$='main'] div[class$='headline'] { visibility: hidden; height: 60px; } #app main[class$='main'] div[class$='headline']:before { content: 'Welkom in Night City'; visibility: visible; display: block; font-family: 'Rock Salt'; font-style: italic; line-height: 60px; font-size: 20px; color: rgba(245, 250, 255, 0.6); padding: 0 20px; } #app form div[class$='inputField'] > div { outline: none; border: none; border-radius: 4px; } #app form div[class$='inputField'] > div > input, #app form div[class$='inputField'] div[class$='countryCodeSelector'] { background: initial; background-color: #453f67; font-family: 'Share Tech'; letter-spacing: 0.5px; font-size: 16px; font-weight: 600; } #app button { font-weight: 600; font-size: 16px; border-radius: 4px; } #app button[type='submit'] { background: linear-gradient(270.84deg, #2fd6fb -24.55%, #6369fc 44.33%, #a741eb 119.2%), #5d34f2; } ``` ![custom-css-preview](https://user-images.githubusercontent.com/14722250/221394786-4ae77638-8f35-4791-afae-8ab6a314dbf8.jpg) _"We hebben een stad om te verbranden!"_ </details> <Note> Aangezien Logto CSS Modules gebruikt, zie je mogelijk een hashwaarde in de `class` eigenschap van DOM-elementen (bijvoorbeeld een `<div>` met `vUugRG_container`). Om deze te overschrijven kun je de `$=` CSS-selector gebruiken om elementen te matchen die eindigen met een specifieke waarde. In dit geval zou het `div[class$=container]` moeten zijn. </Note> ### 🔗 Open standaard connectoren met betere configuratie interface Logto ondersteunt nu standaardprotocollen (SAML, OIDC en OAuth 2.0) voor het maken van sociale connectoren om externe identiteitsproviders te integreren. Elk protocol kan meerdere sociale connectoren maken, wat je meer controle geeft over je toegangsbehoeften. Bovendien hebben we de configuratie-interface voor SAML-connectoren geoptimaliseerd. Probeer het en laat ons je mening weten! ### 📄 Nieuwe taal Russische vertaling toegevoegd. (dank aan [@evist0](https://github.com/evist0)) ## 🎉 Nieuwe bijdragers - [@Alanimdeo](https://github.com/Alanimdeo) heeft hun eerste bijdrage geleverd in [#3064](https://github.com/logto-io/logto/pull/3064) - [@gadkins](https://github.com/gadkins) heeft hun eerste bijdrage geleverd in [#3032](https://github.com/logto-io/logto/pull/3032) - [@evist0](https://github.com/evist0) heeft hun eerste bijdrage geleverd in [#3158](https://github.com/logto-io/logto/pull/3158) - [@muratgozel](https://github.com/muratgozel) heeft hun eerste bijdrage geleverd in [#3203](https://github.com/logto-io/logto/pull/3203) Dank je wel! </article></body></html>