There seems to be a problem if you use the SDK login function to login while the user is connected to another network. All the API calls fail and there seems to be no way to get back to the home network to authenticate.
Here is the code required to test this problem:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Yammer Login</title>
<script type="text/javascript" data-app-id="{INSERT APP ID}" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
</head>
<body>
<div id="Envelope">
<div><span id="yammer-login"></span></div>
<div><input type="button" onclick="getUserInfo()" value="Get User Info"></div>
<script>
yam.connect.loginButton('#yammer-login',
function (resp) {
console.log(resp);
});
function getUserInfo() {
yam.platform.request({
url: 'users/current.json',
method: "GET",
success: function (r) { console.log("GOT RESPONSE"); console.log(r); },
error: function (r) { console.log(r.statusText) }
});
}
</script>
</div>
</body>
</html>
If the user is logged into their home network the login code works and you can press the button to get the users information (note javascript origins are correctly configured).
You you go into the yammer interface and select another network it not longer works.
Here is what the console output looks like:
GET https://www.yammer.com/platform/login_status.json?
client_id={Client ID} 403 (Forbidden)
platform_js_sdk.js:26 XHR finished loading: GET "https://www.yammer.com/platform/login_status.json?client_id={ClientID}".
test.php:18 Object {access_token: Object, success: true, status: "connected", authResponse: true}
api.yammer.com/api/v1/users/current.json:1 GET https://api.yammer.com/api/v1/users/current.json
test.php:1 XMLHttpRequest cannot load https://api.yammer.com/api/v1/users/current.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://webserver.com' is therefore not allowed access. The response had HTTP status code 401.
test.php:26 error
api.yammer.com/api/v1/users/current.json:1 GET https://api.yammer.com/api/v1/users/current.json
test.php:1 XMLHttpRequest cannot load https://api.yammer.com/api/v1/users/current.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://webserver.com' is therefore not allowed access. The response had HTTP status code 401.
test.php:26 error
It appears that the login token that is being uses belongs to the other network and therefore access is restricted.
Based on Yammer REST API: How to get access tokens for external networks?
you need to apply to deploy to the Global App Directory. Specify by e-mail to the Biz Dev rep that your app requires Global Access (even without being published in the App Directory). This resolves the issue.
see slide 5 of http://about.yammer.com/assets/yammer-apps-next-steps.ppt
Related
I have a functioning logout button which successfully ends a session established using express server ExpressOIDC/express-session. The OIDC sessions and the user is redirected to the logged out view. The logout button html is shown here:
<form v-if="authenticated" method="POST" action="/logout" id="auth-logout-form" v-cloak>
<span class="user-name">{{userName}}</span>
<input type="submit" value="Logout" />
</form>
I simply want to mimic this function in my code for inactivity logout.
First I tried a simple $.post('logout'). But this produces the following errors:
Access to XMLHttpRequest at 'https://xxxxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=xxxxxxxxx&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F' (redirected from 'https://localhost:3000/logout') from origin 'https://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jquery.min.js:2
GET https://xxxxxx.oktapreview.com/oauth2/default/v1/logout?id_token_hint=XXXXXXXXXXXXXXXX&post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F net::ERR_FAILED
I then tried this ajax call:
if (this.currSeconds >= 5 && this.authenticated === true) {
// this.logoutOIDC
$.ajax({
url: 'logout',
method: "POST",
headers: {
'Access-Control-Allow-Origin': 'https://localhost:3000/',
},
type: 'dataType',
/* etc */
success: function(jsondata) {
console.log(jsondata)
},
})
}
This produces the same errors.
Of course, "$('#auth-logout-form').trigger('submit')" works great, but it does not seem like the proper approach, and I believe this leaves logout functionality too easily disabled.
The suggestion from Okta was to go ahead and use $('#auth-logout-form').trigger('submit') if I was going to use the middleware. There may be another way, but this method was suitable under the circumstances.
I tried using ajax to fetch my data from database and display it in my blade without refreshing it but when I applied the same steps to fetch different data for the other blade i get this error :
POST http://localhost:8000/barangay/fetch 500 (Internal Server Error)
jquery-3.3.1.js:9600.
Here is the code that needs fixing:
This is my blade:
Here is my ajax script:
Here is my router to fetch the barangays that belonged to the selected city:
Here is my code in my controller to get the data:
and here in here is the output (error :returns nothing):
Laravel uses the CSRF token in post request, so you required to add header in your ajax request something like this:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
for more more details you can use https://laravel.com/docs/5.8/csrf
In addition to checking for the CSRF token as a POST parameter, the VerifyCsrfToken middleware will also check for the X-CSRF-TOKEN request header. You could, for example, store the token in an HTML meta tag:
<meta name="csrf-token" content="{{ csrf_token() }}">
Then, once you have created the meta tag, you can instruct a library like jQuery to automatically add the token to all request headers. This provides simple, convenient CSRF protection for your AJAX based applications:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
By default, the resources/js/bootstrap.js file registers the value
of the csrf-token meta tag with the Axios HTTP library. If you are
not using this library, you will need to manually configure this
behavior for your application.
I am currently using laravel 5.8 and pusher 3.0.3 and I am new to these new tech. I have created a simple chatroom but failed to listen to presence channel using pusher. I previously tried Echo but I can't find a way to debug it.
Here is pusher:subscription_error from the console:
Pusher: JSON returned from webapp was invalid, yet status code was 200. Data was: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
I have already added this line to my BroadcastServiceProvider.php
Broadcast::routes(['middleware' => ['auth:api']]);
require base_path('routes/channels.php');
I have already receive events from pusher debugger with public channel so I think I have set my credentials correctly.
This is the buttom part of my bootstrap.js.
const CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
var pusher = new Pusher('61540f91921896045e25', {
cluster: "ap1",
forceTLS: true,
//authEndpoint: 'authchatuser'
authEndpoint: '/broadcasting/auth',
auth: {
headers: {
'X-CSRF-Token': CSRF_TOKEN
}
}
});
var channel = pusher.subscribe('presence-chatroom');
//var channel = pusher.subscribe('chatroom');
channel.bind('MessagePosted', function(data) {
console.loga(data);
});
channel.bind('pusher:subscription_error', function(data) {
console.log("Pusher: " + data);
});
From the network tab, I couldn't see request to my pusher authEndpoint broadcasting/auth, but instead I see GET request to my homepage which responded with 200 which I think is the reason why I receive html instead of json.
Please help me with this or do you have idea to bypass the endpoint and send json data for authentication (correct data expected by pusher) instead from my web.php? Thank you.
You should not need to bypass the endpoint, but instead you should amend your endpoint to return the correct data.
Your authentication endpoint should return a JSON body along with a HTTP code. The documentation states:
Successful responses from an authentication endpoint should carry a
200 OK HTTP status and a body of the form
{ "auth": $AUTHORIZATION_STRING }
This aligns with the error you are receiving which indicates that JSON is expected but HTML is received.
Laravel 5.6
Vue 2.5.7
Google Chrome
Hi, I am trying to understand this CORS issue, i'm still trying to find a way to consume this list: https://api.coinmarketcap.com/v2/listings/, and I receive the following error:
(index):1 Failed to load https://api.coinmarketcap.com/v2/listings/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://tours.mine' is therefore not allowed access.
yet if I goto this address: https://jsonplaceholder.typicode.com/posts/ everything works fine.
After using this Moesif Chrome CORS extension, and thus disabling CORS for chrome, I received a new error:
Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers in preflight response. received only on this address: https://api.coinmarketcap.com/v2/listings/
http://tours.mine - is a local name I set in httpd/vhosts.conf.
I've tried BarryVdh cors lib, I also created my own CORS middleware, nada.
Flow:
in web.php routes:
Route::get('/', function () {
return view('welcome');
});
in welcome.blade I pass the csrf in both meta:
<meta name="csrf-token" content="{{ csrf_token() }}">
and script:
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
My Vue instance:
<div class="container" id="app">
<coin-add-component></coin-add-component>
</div>
and in my component I have the following hook:
mounted(){
this.axios.get('https://api.coinmarketcap.com/v2/listings/')
.then(response => {
console.log(response.data);
})
.catch(e => {
this.errors.push(e)
})
}
Your help is appreciated,
Bud
The url you are trying to consume can't be used in crossdomain with javascript because it doesn't provide a response header of type "Access-Control-Allow-Origin".
In this case, if you have no control on the API server you are forced to use other unconventional ways because all modern browsers will block any requests to that site if the domain doesn't match with yours.
You have 2 alternative to solve this problem:
Use a proxy with your same domain of yours to redirect all calls to that server
Make ajax calls to your server and then make your server communicate directly with the api server using for example curl
if you are using this(https://github.com/barryvdh/laravel-cors) make sure you turn off csrf token in your mid
I have registered my App and set the Javascript origin to include my domain. But when I call yam.getLoginStatus in chrome, I get a 401, although I'm logged in.
Here's my test page (app id obfuscated):
<html>
<head>
<script type="text/javascript" src="https://assets.yammer.com/assets/platform_js_sdk.js"> </script>
</head>
<body>
<span id="yammer-login"></span>
<script>
yam.config({appId: "XXXXXXXXXXXXXXXXX"});
yam.connect.loginButton('#yammer-login', function (resp) {
if (resp.authResponse) {
console.log(resp);
document.getElementById('yammer-login').innerHTML = 'Welcome to Yammer!';
yam.getLoginStatus(function(response){console.log(response);}, true);
}
});
</script>
</body>
</html>
In chrome, on loading the page, I see:
GET https://www.yammer.com/platform/login_status.json?client_id=XXXXXXXXXXXXXXXXX&_=1407286964912 401 (Unauthorized)
And when clicking the login button, the output I get in the console window is:
Object {access_token: Object, success: true, status: "connected", authResponse: true}
GET https://www.yammer.com/platform/login_status.json?client_id=XXXXXXXXXXXXXXXXX&_=1407286968658 401 (Unauthorized)
Object {status: "notConnected", access_token: "", perms: ""}
In other words, the login button works (I do get a valid response.authResponse); but when I immediately ask if I'm logged in, I get a 401.
I'm obviously doing something wrong... any advice? Thanks in advance!
Okay, figured it out. Yammer requires that the user has third party cookies enabled in their browser... which I tend to disagree with, but whatever! Enabling third party cookies fixed this problem.