私は woocommerce rest api の助けを借りて製品と注文を表示するアプリを作成する必要がある反応ネイティブ プロジェクトに取り組んでいます。
crypto npm モジュールが反応ネイティブでサポートされていないため、json データをフェッチするために独自の oauth リクエストを作成しているため、oauth マネージャーと woocommerce-api npm モジュールを使用できません。
woocommerce の公式ドキュメントに従って、リクエストに必要なすべてのパラメーターをコード化しています。
http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication-over-http
次のコードは、認証リクエストを行います。
import React, { Component } from 'react';
import {
StyleSheet,
Text,
Image,
TextInput,
Alert,
Navigator,
TouchableHighlight,
View
} from 'react-native';
var n = require('nonce')();
var percentEncode = require('oauth-percent-encode');
var timestamp = require('timestamp');
var hmacsha1 = require('hmacsha1');
var Hashes = require('jshashes');
var appendQuery =require('append-query');
var consumerSecret = "cs_xxxxxxxxxxxxxxxxxxxxxxx";
var consumerKey ="ck_xxxxxxxxxxxxxxxxxxxxxxx";
var time = timestamp();
var nonce = n().toString();
console.log(nonce);
var httpMethod ="GET";
var storeURL = "http://stephin.xyz.net/wordpress/";
var endPoint = storeURL+"wc-api/v1/orders";
var params = percentEncode('oauth_callback')+"="+percentEncode('homebrew://')+"&"+percentEncode('oauth_consumer_key')+"="+percentEncode(consumerKey)+"&"+percentEncode('oauth_nonce')+"="+percentEncode(nonce)+"&"+percentEncode('oauth_signature_method')+"="+percentEncode('HMAC-SHA1')+"&"+percentEncode('oauth_timestamp')+"="+percentEncode(time);
var baseURL = httpMethod+"&"+percentEncode(endPoint)+"&"+percentEncode(params);
var signature= hmacsha1(baseURL,consumerSecret);
var finalURL = endPoint+'?oauth_consumer_key='+consumerKey+'&oauth_signature='+signature+'&oauth_signature_method=HMAC-SHA1&oauth_callback=honestbrew://&oauth_nonce='+nonce+'&oauth_timestamp='+time;
console.log(signature);
export default class HonestBrewLogin extends Component{
constructor(){
super();
this.state={
title: "Log In",
sitelogo:'../../assets/images/hb-logo.png',
email:"",
password:""
}
}
_handleAppLogin(){
if (this.state.email == "") {
if (this.state.password == "") {
// this.props.navigator.push({
// name: 'HonestBrewMyOrders', // Matches route.name
// });
console.log(finalURL);
fetch(finalURL).then((response) => console.log(response)).catch((error) => {
console.error(error);
});
}
else {
console.log("password incorect")
}
}
else {
console.log("email incorrect");
}
}
_handleRegisterLink(){
console.log("Link to register screen clicked");
}
_handleForgetPassword(){
console.log("Link to forgot password screen tapped");
}
render() {
return (
<View style={styles.loginContainer}>
<View style={styles.headingContainer}>
<Text style={styles.loginText}>
{this.state.title}
</Text>
</View>
<View style={styles.loginFormContainer}>
<View style={styles.loginImageSection}>
<Image style={styles.loginLogo} source={require("../../assets/images/hb-logo.png")} />
</View>
<View style={styles.loginSection}>
<TextInput
style={styles.loginEmailTextInput}
placeholder="Enter Email"
value={this.state.email}
onChangeText={(email) => this.setState({email})}
/>
<TextInput
style={styles.loginPasswordTextInput}
placeholder="Enter Password"
value={this.state.password}
secureTextEntry={true}
onChangeText={(password) => this.setState({password})}
/>
<TouchableHighlight style={styles.loginSubmitButton} underlayColor="#deb887" onPress={this._handleAppLogin.bind(this)}>
<Text style={styles.loginSubmitButtonText}>Sign in</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.loginForgotPasswordLink} underlayColor="#deb887" onPress={this._handleForgetPassword}>
<Text>Forgot Password?</Text>
</TouchableHighlight>
</View>
</View>
<TouchableHighlight style={styles.registerLinkContainer} underlayColor="#deb887" onPress={this._handleRegisterLink}>
<Text>Dont have an account? Register now.</Text>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
headingContainer: {
flex:0.2,
height:10,
marginTop:20,
alignItems:'center'
},
loginText:{
color: "#000",
textAlign:"center"
},
loginContainer:{
flex:1
},
loginFormContainer:{
backgroundColor: "#f0efeb",
alignItems:"center",
justifyContent:"center",
flex:8,
},
loginSection:{
flex:2,
flexDirection:"column",
alignItems:'center',
justifyContent:"flex-start"
},
registerLinkContainer:{
flex:0.2,
},
loginLogo:{
height:65,
width:100,
},
loginImageSection:{
flex:1,
alignItems:"center",
justifyContent:"flex-end"
},
loginEmailTextInput:{
height:40,
width:250,
marginTop:40,
padding: 10,
fontSize:14,
alignItems:"center",
backgroundColor:"#fff",
borderWidth:0.5,
borderColor: "#D6D3D3"
},
loginPasswordTextInput:{
height:40,
width:250,
marginTop:10,
padding: 10,
fontSize:14,
alignItems:"center",
backgroundColor:"#fff",
borderWidth:0.5,
borderColor: "#D6D3D3"
},
loginSubmitButton:{
height:40,
width:250,
backgroundColor:"#ff9002",
marginTop:20,
justifyContent:"center",
alignItems:"center"
},
loginSubmitButtonText:{
color:"#fff"
},
registerLinkContainer:{
alignItems:"center",
height:40,
justifyContent:"center"
},
loginForgotPasswordLink:{
marginTop:20
}
});
リクエストを行うたびに、次のエラーが発生します。
{
"errors": [
{
"code": "woocommerce_api_authentication_error",
"message": "Invalid Signature - provided signature does not match"
}
]
}
私が何をしても、最終結果は常にこのエラーです。