Versions:
keycloak 12.0.2
nuxt: 2.14.6
nuxt/auth-next: 5.0.0-1622918202.e815752
Configs:
nuxt.config.js
auth: {
strategies: {
keycloak: {
scheme: '~/plugins/keycloak.js',
endpoints: {
authorization:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/auth',
token:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token',
userInfo: "https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/token",
logout:'https://keycloak.bgzchina.com/auth/realms/bgzchina/protocol/openid-connect/logout',
},
responseType: 'id_token token',
clientId: 'centuari-portal-fe',
scope: ['openid'],
}
},
redirect: {
login: '/login',
logout: '/logout',
callback: '/callback',
home: '/',
}
},
router: {
middleware: ['auth']
},
due to a issue with current version nuxt/auth-next, I created a custom scheme by extending oauth2
/plugin/keycloak.js
import { Oauth2Scheme } from '~auth/runtime'
function encodeQuery(queryObject) {
return Object.entries(queryObject)
.filter(([_key, value]) => typeof value !== 'undefined')
.map(([key, value]) => encodeURIComponent(key) + (value != null ? '=' + encodeURIComponent(value) : ''))
.join('&')
}
export default class KeycloakScheme extends Oauth2Scheme {
logout() {
if (this.options.endpoints.logout) {
const opts = {
client_id: this.options.clientId,
post_logout_redirect_uri: this._logoutRedirectURI
}
const url = this.options.endpoints.logout + '?' + encodeQuery(opts)
window.location.replace(url)
}
return this.$auth.reset()
}
}
but when doing login, browser will block the token request due to CORS. keycloak server response for the preflight specify allowed method is POST, OPTIONS, but auth-next use GET to fetch token.
Is there any work around ?
You need to add/register the url into keycloak admin dashboard.
Go to keycloak admin dashboard
Menu Clients => select the client
On Settings tab, scroll down the page and find Web Origins. Add your frontend url (nuxt url) on it. Don't forget to add into Valid Redirect URIs too.
Related
I'm trying to exchange the authorization code I got in the first step of the documentation for access token. Where I'm stuck is how to send a request for the token that contains the code I've just got with the first request.
This is my code:
auth: {
redirect: {
login: '/',
callback: '/auth'
},
strategies: {
wrike: {
scheme: 'oauth2',
endpoints: {
authorization: 'https://login.wrike.com/oauth2/authorize/v4',
token: 'https://login.wrike.com/oauth2/token',
logout: '/'
},
token: {
property: 'access_token',
type: 'Bearer',
maxAge: 1800
},
responseType: 'code',
grantType: 'authorization_code',
accessType: 'offline',
clientId: XXXX,
client_secret: YYYY
}
}
}
I can't figure it out how I should set up the redirect URI, in the client or in the server side? How should I do the second request? (This below)
POST https://login.wrike.com/oauth2/token
//Parameters:
client_id=<client_id>
client_secret=<client_secret>
grant_type=authorization_code
code=<authorization_code>
I think Edward is right. It doesn't seem to work. You can either do the custom schema which is what I am going to do, or you can do what I currently have which is something like this (of course ignore all the console.log and stuff like that):
const urlParams = new URLSearchParams(window.location.search)
const code = urlParams.get('code')
const state = urlParams.get('state')
console.log('state', state)
console.log('stateStorage', window.localStorage.getItem(state))
if ((code && state) && state === window.localStorage.getItem('state')) {
this.$axios.post('http://publisher-local.co.uk:8080/oauth/token', {
grant_type: 'authorization_code',
client_id: 5,
redirect_uri: 'http://localhost:3000/auth',
code_verifier: window.localStorage.getItem('verifier'),
code
}).then(response => {
this.$auth.setUserToken(response.data.access_token)
this.$auth.fetchUser()
})
}
So basically after you are redirected back to your client after logging in on the server page just look for the details in the URL and make the request yourself.
I'm authenticating to Laravel (7.3) Passport with the following configuration:
nuxt.config.js
auth: {
redirect: {
login: '/login',
logout: '/login',
home: '/'
},
strategies: {
'laravel.passport': {
url: 'http://laravel.test',
client_id: '2',
client_secret: 'S0gpcgfIDgbvIHCL3jIhSICAiTsTUMOR0k5mdaCi',
redirect_uri: 'http://localhost:3000'
}
}
}
Authentication method in pages/login.vue:
async nuxtLaravelPassport() {
try {
const response = await this.$auth
.loginWith('laravel.passport')
.then(result => {
console.log(result)
})
} catch (err) {
console.log(err)
}
},
It brings me to the authentication page of Laravel, then I log in and I'm redirected to my Nuxt.js home page with a code and state as parameters.
What should I do with these code and state ? Get a token ? If yes, how ?
We are using the React Native appAuth library(https://github.com/FormidableLabs/react-native-app-auth) with Identity Server 4. and attempting to make use of the additionalParameters on the response. The reason for this is we have a language selector on the IDS4 login page and we wish to send the selected language back to the Native app and have the appAuth library receive this, so the app can adjust accordingly.
How do i modify Identity Server to do this
return authorize(Auth.getConfig())
.then(authDetails => {
const { lang } = authDetails.additionalParameters;
if (!lang) return authDetails;
return Auth.setUserLang(lang, authDetails.accessToken).then(() => authDetails);
})
.then(authDetails => {
store.dispatch(addAuth(authDetails));
return authDetails;
})
.catch(e =>
Auth.logout().then(() => {
throw e;
})
);
static getConfig() {
const { apis: { identityServerURL } } = store.getState();
return {
issuer: identityServerURL,
clientId: IDENTITY_SERVER_CLIENT_ID,
redirectUrl,
additionalParameters: {},
scopes: ['openid', 'profile', 'offline_access'],
dangerouslyAllowInsecureHttpRequests: true,
};
}
I have tried using ICustomAuthorizeRequestValidator
context.Result.ValidatedRequest.RedirectUri = $"{context.Result.ValidatedRequest.RedirectUri}?lang={context.Result.ValidatedRequest.UiLocales}";
but this does not work as identity server errors with
"Error","MessageTemplate":"Invalid redirect_uri: {redirectUri}, expected {exceptRedirectUri}","Properties":{"redirectUri":"icisapp:/oauthredirect","exceptRedirectUri":"icisapp:/oauthredirect?lang=zh"
Anybody have any ideas?
I've got a Web API which I've secured with OAuth2 but I'm having difficulty getting Swagger UI to show the authentication option.
Currently, the api_key section of UI still shows, despite there being no configuration for it.
Here's my SwaggerConfig
public class SwaggerConfig
{
public static void Register()
{
if (ConfigUtil.SSOSupported)
{
var thisAssembly = typeof(SwaggerConfig).Assembly;
// Swashbuckle.Application.OAuth2SchemeBuilder
GlobalConfiguration.Configuration
.EnableSwagger(c =>
{
c.Schemes(new[] { "http", "https" });
c.SingleApiVersion("v1", "API Adapter");
c.PrettyPrint();
c.ApiKey(string.Empty);
c.OAuth2("oauth2")
.Description("Description here")
.Flow("implicit")
.AuthorizationUrl(ConfigUtil.SSOAuthority() + "/connect/authorize")
.Scopes(scopes =>
{
scopes.Add("api", "api");
});
c.IgnoreObsoleteProperties();
c.DescribeAllEnumsAsStrings();
})
.EnableSwaggerUi(c =>
{
c.EnableOAuth2Support("your-client-id", "your-client-secret-if-required", "your-realms", "your-app-name");
});
}
}
}
This section is included in page source after loading:
window.swashbuckleConfig = {
rootUrl: 'http://localhost:44390',
discoveryPaths: arrayFrom('swagger/docs/v1'),
booleanValues: arrayFrom('true|false'),
validatorUrl: stringOrNullFrom(''),
customScripts: arrayFrom(''),
docExpansion: 'none',
supportedSubmitMethods: arrayFrom('get|put|post|delete|options|head|patch'),
oAuth2Enabled: ('true' == 'true'),
oAuth2ClientId: 'your-client-id',
oAuth2ClientSecret: 'your-client-secret-if-required',
oAuth2Realm: 'your-realms',
oAuth2AppName: 'your-app-name',
oAuth2ScopeSeperator: ' ',
oAuth2AdditionalQueryStringParams: JSON.parse('{}'),
apiKeyName: 'api_key',
apiKeyIn: 'query'
};
And the iniOAuth function is called:
window.swaggerUi = new SwaggerUi({
url: swashbuckleConfig.rootUrl + "/" + swashbuckleConfig.discoveryPaths[0],
dom_id: "swagger-ui-container",
booleanValues: swashbuckleConfig.booleanValues,
supportedSubmitMethods: swashbuckleConfig.supportedSubmitMethods,
onComplete: function(swaggerApi, swaggerUi){
if (typeof initOAuth == "function" && swashbuckleConfig.oAuth2Enabled) {
initOAuth({
clientId: swashbuckleConfig.oAuth2ClientId,
clientSecret: swashbuckleConfig.oAuth2ClientSecret,
realm: swashbuckleConfig.oAuth2Realm,
appName: swashbuckleConfig.oAuth2AppName,
scopeSeparator: swashbuckleConfig.oAuth2ScopeSeperator,
additionalQueryStringParams: swashbuckleConfig.oAuth2AdditionalQueryStringParams
});
But I just get the api_key text box and no Authorize button like I'd expect.
The controllers and actions all display without an issue.
I'm sure it's something small, but I've been fiddling for a couple of days now and have run out of ideas.
We are using hapijs and oauth server for authentication. we need to implement role based authorization in hapijs. is below way is fine for hapijs.
Register authentication scheme
server.auth.scheme('custom', function (server, options) {
return {
authenticate: function (request, reply) {
// calling oauth flow for roles match
}
});
Register authentication strategy & adding auth,roles in server.route
server.auth.strategy('default', 'custom');
server.route({
method: 'GET',
path: API_Path,
config: {
roles: ['ADMIN', 'USER'],
auth : 'default'
},
handler: function (request, reply) {
return reply.act({
role: 'admin',
cmd: 'getInfo',
id: request.params.id
});
}
});
You should register a strategy and validate the credentials like this.
const validate = function (request, username, password, callback) {
const user = users[username];
if (!user) {
return callback(null, false);
}
Bcrypt.compare(password, user.password, (err, isValid) => {
callback(err, isValid, { id: user.id, name: user.name });
});
};
server.auth.strategy(strategy_name, scheme_name, { validateFunc: validate });
Your auth should have options like mode, scope, strategy etc
...
...
auth :{
mode:'required',
strategy:'strategy_name',
scope: ['ADMIN', 'USER']
},
...
...
You can use Bell