Okta Widget NICHT Rendering

Question

Derzeit 1.6.0 der Skripte und CSS-Dateien verwenden. Ich habe das Widget in meine Angular 1.5.x App integriert. Ich habe Probleme erlebt 404 empfangen, wenn sie versuchen, die OKTA Widget als GET-Anforderung an zu machen: ein Mittel

https://*.oktapreview.com/api/v1/sessions/me

Welche, dass das Widget einmal gerendert wird, und ich bin in der Lage eingeloggt sein, aber sobald ich mich wieder auslogge Ich kann das Widget nicht erneut rendern, ohne zuvor den Browser aktualisieren zu müssen.

Hat jemand dieses Problem gefunden und gelöst?

Answer 1

Ich denke, dass dies mit this Stack Overflow issue zusammenhängen könnte. Können Sie Ihre Datenschutzeinstellungen überprüfen?

Der Grund für dieses Problem ist, weil das Widget die sessionToken (die Sie nach dem Einloggen erhalten) mit einem id_token über einen versteckten iframe austauscht, zu welchem ​​Zeitpunkt auch der Sitzungscookie gesetzt wird. Aber da dies in einem ist, wird es als ein Cookie von Drittanbietern betrachtet.

Es gibt derzeit keine gute Lösung, wenn in Ihrem Browser Cookies von Drittanbietern deaktiviert sind, ohne dass Sie zum Festlegen des Sitzungscookies zu Okta weitergeleitet werden. Eine neue Version (1.8.0) des Widgets wird diese Woche veröffentlicht werden, wird dies einfacher machen (Siehe this commmit, die dieses Problem anspricht). Mit dieser neuen Version führt die Übergabe in authParams.display = 'page' den Anruf an /authorize über eine Umleitung statt über den versteckten iframe.

Answer 2

Nun, da 1.8.0 ist über Okta CDN zur Verfügung, hier ist ein Beispiel dafür, wie die authParams.display = 'page' Einstellung oben beschrieben verwenden:

<script> 
    var config = { 
     baseUrl: 'https://YOUR-OKTA-ORG-HERE.okta.com', 
     clientId: 'YOUR-OKTA-CLIENT-ID-HERE', 
     redirectUri: 'YOUR-REDIRECT-URL-HERE', 
     authParams: { 
     responseType: 'code', 
     display: 'page', 
     scopes: ['openid', 'email', 'profile'], 
     } 
    }; 
    var oktaSignIn = new OktaSignIn(config); 

    oktaSignIn.renderEl({ el: '#app-container' },() => {}); 
    </script>