CODEWITHSUNDEEP
ionic-frameworktokenjhipster
Mason Smith
Mason Smith

Reputation: 115

Ionic + Jhipster oauth2 Error No Access-Control

Been trying to use Jhipsters oauth2 login with an ionic app on localhost, and keep getting:

OPTIONS http://172.16.40.31:8080/oauth/token (anonymous function) @ ionic.bundle.js:23826sendReq @ ionic.bundle.js:23645serverRequest @ ionic.bundle.js:23357processQueue @ ionic.bundle.js:27879(anonymous function) @ ionic.bundle.js:27895Scope.$eval @ ionic.bundle.js:29158Scope.$digest @ ionic.bundle.js:28969Scope.$apply @ ionic.bundle.js:29263(anonymous function) @ ionic.bundle.js:36615eventHandler @ ionic.bundle.js:16583triggerMouseEvent @ ionic.bundle.js:2948tapClick @ ionic.bundle.js:2937tapMouseUp @ ionic.bundle.js:3013 ?ionicplatform=android:1 XMLHttpRequest cannot load http://172.16.40.31:8080/oauth/token. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 401. ?ionicplatform=android:1 XMLHttpRequest cannot load http://172.16.40.31:8080/api/logout. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

I have tried adding the google plugin, did not change anything. Made sure that the .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() was in the setting.

Is there anything else I am missing?

Upvotes: 3

Views: 390

Answers (1)

Abhishek Patil
Abhishek Patil

Reputation: 1445

try uncommenting cors in application.yml

cors: #By default CORS are not enabled. Uncomment to enable.
        allowed-origins: "*"
        allowed-methods: GET, PUT, POST, DELETE, OPTIONS
        allowed-headers: "*"
        exposed-headers:
        allow-credentials: true
        max-age: 1800

To access REST API with Oauth2 authentication in ionic you must first get the token in ionic app by

    $http({
    method: "post", 
    url: "http://192.168.0.4:8085/[Your app name]/oauth/token",
    data:  "username=admin&password=admin&grant_type=password&scope=read write&client_secret=my-secret-token-to-change-in-production&client_id=auth2Sconnectapp",
    withCredentials: true,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'Accept': 'application/json',
      'Authorization': 'Basic ' + 'YXV0aDJTY29ubmVjdGFwcDpteS1zZWNyZXQtdG9rZW4tdG8tY2hhbmdlLWluLXByb2R1Y3Rpb24='
      }
  })                
  .success(function(data) {
      alert("success: " + data);
  })
  .error(function(data, status) {
      alert("ERROR: " + data);
  });

here "YXV0aDJTY29ubmVjdGFwcDpteS1zZWNyZXQtdG9rZW4tdG8tY2hhbmdlLWluLXByb2R1Y3Rpb24=" is equal to (clientId + ":" + clientSecret)--all base64-encoded

you can use https://www.base64encode.org/ to verify or recreate it for yourself

the aboue $http if successful will give you this JSON

{
  "access_token": "2ce14f67-e91b-411e-89fa-8169e11a1c04",
  "token_type": "bearer",
  "refresh_token": "37baee3c-f4fe-4340-8997-8d7849821d00",
  "expires_in": 525,
  "scope": "read write"
}

take notice of "access_token" and "token_type" if you want to access any API this is what you have to use.

for example 

$http({
    method: "get", 
    url: "http://192.168.0.4:8085/auth-2-sconnect/api/countries",
    withCredentials: true,
    headers: {
      'Authorization':' [token_type] + [space] + [access_token] '
      }
  })                
  .success(function(data) {
      alert("success: " + data);
  })
  .error(function(data, status) {
      alert("ERROR: " + data);
  });

Upvotes: 2

Related Questions