can you make a example?

277850318 commented 8 years ago

redirect_url: YOUR REDIRECT URL
this is my redirect_url igb9e9780e18344d9bbfe0027204ced51d://authorize

it shows error,how can i fix?

watzak commented 8 years ago

Hello

I tried following url in the browser with your data and it did not work out => https://www.instagram.com/oauth/authorize?response_type=code&client_id=b9e9780e18344d9bbfe0027204ced51d&redirect_uri=igb9e9780e18344d9bbfe0027204ced51d://authorize

Got the same error as u did:

I just tried it with one of my settings and I got following back:

So there must be something wrong with the data! Try to change the redirect url to something simple example://init and try it again!

The redirect URI you use in your app to authenticate has to match with the registered URI.

I think I have found now the issue! Do not use Instagram, IG, insta or gram in your app name.

Then it will probably work for u ;)

Cheers Klausi

277850318 commented 8 years ago

it's not help me....

sslash commented 8 years ago

I got the exact same error on the Instagram API website (valid redirect URI's must either be HTTP, or HTTPS). What is the correct way to handle link redirection?

watzak commented 8 years ago

Hi @sslash Instagram has unfortunately changed the validation for redirecturl in their dashboard! So it must be a valid https url! The one thing to keep in mind is that all requests to the instagram API must be made over SSL (https:// not http://). The easiest way is to redirect to your own server! So u have to add a valid domain! Within the redirection_url u will also get the access_token!

sslash commented 8 years ago

Aha! Makes sense. How would you redirect the client from my server back to the app though (after being redirected from Instagram to my server)?

watzak commented 8 years ago

Hi @sslash

If u have a own server, u can redirect to your mobile app e.g.: myapp:// (keyword: deep linking):

`<!DOCTYPE html>

iOS Automatic Deep Linking

Callback

` For further information about deep linking, please check out following sites: https://medium.com/@ageitgey/everything-you-need-to-know-about-implementing-ios-and-android-mobile-deep-linking-f4348b265b49#.sqbsx29ub https://medium.com/@pbojinov/deep-links-in-react-native-v0-22-part-1-android-c4b08dbf8eba#.v5i6xnv7e http://mobiledeeplinking.org/ Hope it helps u ;) Can't give u a working example as I am too busy at the moment, but will probably do that in the future ;) Cheers Klausi

machadogj commented 8 years ago

@watzak @sslash I just tried this approach. It works however:

~~the redirect should # instead of ?: window.location = "myapp://#"+window.location.hash;~~
the user experience on this is not ideal. It prompts the user to open the app, when in fact it's already opened.

Cheers!

Edit: actually, the # is not required, and neither is the ?.

277850318 commented 8 years ago

this is my code,and successfull.

import React, {Component} from 'react'; import { StyleSheet, View, WebView, } from 'react-native';

export default class Instagramsdk extends Component {

uri='https://api.instagram.com/oauth/authorize/'+
    '?client_id='+INSTAGRAM_CLIENT_ID+
    '&redirect_uri='+HOST+
    '&response_type=token';
webview=null;

onLoadStart(event) {
    var state=event.nativeEvent;
    console.log('onLoadStart',state.url);

    if (/#access_token/.test(state.url) == true) {
        this.webview.stopLoading();
        var accessToken=state.url.split('=').pop();
        var loginExpire=Date.now()+7*24*3600*1000;
        var loginType='instagram';

        //you do.....
    }
}

render() {
    return (
        <View style={styles.container}>
            <WebView
                ref={(webview) => this.webview=webview}
                source={{
                    uri: this.uri,
                }}
                bounces={false}
                domStorageEnabled={true}
                startInLoadingState={true}
                onLoadStart={this.onLoadStart.bind(this)}
            />
        </View>
    );
}

}

const styles = StyleSheet.create({ container:{ flex:1, }, });

deitrick commented 8 years ago

@277850318 What did you end up providing in the Instagram dashboard for the redirect_url? Did you go the deep linking route?

watzak / react-native-instagram-oauth

can you make a example? #6

Cheers!